three.js小案例

最新推荐文章于 2024-07-30 16:52:55 发布

渣渣前端

最新推荐文章于 2024-07-30 16:52:55 发布

阅读量564

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/dtbk123/article/details/104471925

版权

three.js 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{margin:auto;
            overflow: hidden;
        }
    </style>
</head>
<script src='../libs/three.js'></script>
<script src="../libs/TrackballControls.js"></script>
<body>
  <div id='webgl'> 
    </div>
    <script>
        function init(){
            var renderer=new THREE.WebGLRenderer(45,window.innerWidth,window.innerHeight);
            var camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
         
           
            var track=new THREE.TrackballControls(camera);
            //旋转速度
            track.rotateSpeed = 5;
        //变焦速度
        track.zoomSpeed = 3;
        //平移速度
        track.panSpeed = 0.8;
        //是否不变焦
        track.noZoom = false;
        //是否不平移
        track.noPan = false;
        //是否开启移动惯性
        track.staticMoving = false;
        //动态阻尼系数 就是灵敏度
        track.dynamicDampingFactor = 0.3;
        

            renderer.setSize(window.innerWidth,window.innerHeight);
            renderer.setClearColor(new THREE.Color(0x000000))
            renderer.shadowMapEnabled=true

            var scene=new THREE.Scene();
            //添加平面
            var planeGmometry=new THREE.PlaneBufferGeometry(70,70);
            var planeMaterial=new THREE.MeshPhongMaterial(0xc0c0c0);
            var plane=new THREE.Mesh(planeGmometry,planeMaterial);
            plane.rotation.x=-0.5*Math.PI
            plane.position.set(0,0,0);
            plane.receiveShadow=true;
            scene.add(plane);
            //添加聚光灯
            var sposLight=new THREE.SpotLight(0xffffff);
            sposLight.position.set(0,40,45);
            sposLight.castShadow=true
            scene.add(sposLight)

            //添加环境光
           var ambientLight=new THREE.AmbientLight(0x444444);
           scene.add(ambientLight)
            //添加球体
            var sphereGeometry=new THREE.SphereGeometry(10,50,50);
            var sphereMaterial=new THREE.MeshPhongMaterial({color:0xff3333});
            var sphere=new THREE.Mesh(sphereGeometry,sphereMaterial);
            sphere.position.set(15,10,0)
            scene.add(sphere);

            //添加正方体
            var boxGeometry=new THREE.BoxGeometry(10,10,10);
            var boxMaterial=new THREE.MeshPhongMaterial({color:new THREE.Color(0x00ff00)});
            var box=new THREE.Mesh(boxGeometry,boxMaterial);
            box.castShadow=true;
            box.position.set(-10,5,0);
            scene.add(box)


            camera.position.set(10,40,50);
            camera.lookAt(scene.position);
            renderer.render(scene,camera);
            document.getElementById('webgl').appendChild(renderer.domElement);

            requestAnimationFrame(render)
            function render(){
                renderer.render(scene,camera)

                track.update()
                requestAnimationFrame(render)
            }
            //监听窗口大小变化
            window.onresize=function(){
               
                camera.aspect=window.innerWidth/window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.render(scene,camera)
                renderer.setSize(window.innerWidth,window.innerHeight);
               
            }

        }

window.onload=init
    </script>
</body>
</html>