【three.js 第一课】创建场景，显示几何体--中华百科

1. three.js中文手册网址：https://www.techbrood.com/threejs/docs/

注意事项：

代码中出现的 new THREE 中的 THREE 必须为大写。

<!DOCTYPE html><html><head>    <title>demo1</title></head><style type="text/css">   body{        margin:0;   }   canvas{        width:100%;        height:100%;   }</style><body>    <script src="jquery.min.js"></script>    <script src="../build/three.js"></script>    <script type="text/javascript">         var scene = new THREE.Scene();//创建场景        //创建一个摄像机对象        var camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);          //创建渲染器        var renderer = new THREE.WebGLRenderer();        renderer.setSize(window.innerWidth, window.innerHeight);               document.body.appendChild(renderer.domElement);//渲染到浏览器         //创建形状BoxGeometry        var geometry = new THREE.BoxGeometry(1,1,1);         //创建材料   wireframe是否使用线条        var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:false});                //将材料和形状结合        var cube = new THREE.Mesh(geometry,material);                //加入场景中        scene.add(cube);         camera.position.z=3;//设置相机的位置          //逻辑        var update=function(){            //物体随着XY轴旋转            cube.rotation.x +=0.01;            cube.rotation.y += 0.005;        }         //绘画渲染        var render=function() {            renderer.render(scene,camera);        }         //循环运行update，render        var loop=function() {             requestAnimationFrame(loop);             update();             render();        }         loop();//循环开始</script></body></html>

标签：

文章标题：【three.js 第一课】创建场景，显示几何体发布于2024-01-16 22:33:58

【three.js 第一课】创建场景，显示几何体

18708131921