美文网首页
第一个3D场景

第一个3D场景

作者: 逸崖 | 来源:发表于2019-03-07 16:56 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="lib/three.js"></script>
        <script src="lib/OrbitControls.js"></script>
    </head>
    
    <body>
        <script>
            var scene = new THREE.Scene(); //场景
            var geometry = new THREE.BoxGeometry(90, 90, 90);//穿件一个几何体
            var material = new THREE.MeshLambertMaterial({//材质
                color: 0xffff00
            })
            var mesh = new THREE.Mesh(geometry, material)//模型
            scene.add(mesh)
    
            var point = new THREE.PointLight(0xffffff);
            point.position.set(100, 100, 100);
            scene.add(point);
    
            var ambient = new THREE.AmbientLight(0x66666);
            scene.add(ambient);
    
            //helper
            var helper = new THREE.AxesHelper(200);
            scene.add(helper);
    
            var width = window.innerWidth;
            var height = window.innerHeight;
    
            var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
            camera.position.set(50, 100, 300);
            camera.lookAt(new THREE.Vector3(0, 0, 0))
    
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0x0000ff)
            renderer.setSize(width, height)
            document.body.appendChild(renderer.domElement);
    
            renderer.render(scene, camera);
        </script>
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:第一个3D场景

          本文链接:https://www.haomeiwen.com/subject/vrmcpqtx.html