《Three.js开发指南》学习笔记一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
           margin: 0;
           overflow: hidden;
        }
    </style>
    <script src="js/three.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
</head>

<body>
    <div id="WebGL-output"></div>
    <script>
        $(function(){
            // 场景
            var scene = new THREE.Scene();
            //   相机
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            // 渲染器
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xEEEEEE, 0.5);
            renderer.setSize(window.innerWidth, window.innerHeight);
            //   创建坐标轴
            var axes = new THREE.AxisHelper(20);
            scene.add(axes)
            // 创建平面 宽60 高20 
            var planeGeometry = new THREE.PlaneGeometry(60, 20);
            // 平面的外观 颜色透明度
            var planeMaterial = new THREE.MeshBasicMaterial(
                { color: 0xcccccc }
            );
            // 添加平面
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.x = 15;
            plane.position.y = 0;
            plane.position.z = 0;
            scene.add(plane)
            // 添加方块
            var cubeGeometry = new THREE.CubeGeometry(4,4,4);
            var cubeMeterial = new THREE.MeshBasicMaterial({
                color:0xff0000,wireframe:true
            });
            var cube = new THREE.Mesh(cubeGeometry,cubeMeterial);
            cube.position.x = -4;
            cube.position.y = 3;
            cube.position.z = 0;
            scene.add(cube);
            // 添加球体
            var sphereGeometry = new THREE.SphereGeometry(4,20,20);
            var sphereMaterial = new THREE.MeshBasicMaterial({
                color:0x7777ff,wireframe:true
            });
            var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

            sphere.position.x = 20;
            sphere.position.y = 4;
            sphere.position.z= 2;
            scene.add(sphere);
            // 相机位置
            camera.position.x = -30;
            camera.position.y = 40;
            camera.position.z = 30;
            // 为了确保相机能够拍摄到这些物体，我们使用lookAt()函数指向场景的中心
            camera.lookAt(scene.position);
            // 将renderer的输出挂接到HTML页面框架中的<div>元素
            $("#WebGL-output").append(renderer.domElement);
            renderer.render(scene,camera)
        })


    </script>

</body>

</html>
这里写图片描述
《Three.js开发指南》学习笔记一

猜你喜欢
