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

最新推荐文章于 2022-08-08 10:31:39 发布

小张帅三代

最新推荐文章于 2022-08-08 10:31:39 发布

阅读量533

点赞数

分类专栏： # JS 文章标签：张小三 webGL three.js 3D

未经允许，不可转载 by张小三

本文链接：https://blog.csdn.net/qq_38313548/article/details/90680627

版权

JS 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

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>