01three.js基本组件

GIF2.gif 图片.png

        function main() {
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
            camera.position.set(-80,60,80);
            camera.lookAt(scene.position);
            //坐标
            var axes = new THREE.AxisHelper(10);
            scene.add(axes);
            //
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor('#a68da2');
            renderer.setSize(window.innerWidth,window.innerHeight);
            renderer.shadowMapEnabled = true;

            //基本颜色
            var color = new THREE.Color(0xCCCCCC);
            //随机颜色数组 每次使用时候调用一次
            function randomColor() {
                var rColor = new Float32Array( [Math.random(),Math.random(),Math.random()]);
                return rColor;
            }

            //材质
            var geoMaterial1 = new THREE.MeshBasicMaterial({
                color:0xFFFFFF*Math.random(),wireframe:true
            });

            var geoMaterial2 = new THREE.MeshLambertMaterial({
                color:color.fromArray(randomColor())
            });
            var geoMaterial3 = new THREE.MeshLambertMaterial({
                color:0xDDDDDD
            });
            //平面
            var planeGeometry = new THREE.PlaneGeometry(120,120);
            var plane =  new THREE.Mesh(planeGeometry,geoMaterial3);
            plane.rotation.x = -0.5*Math.PI;
            plane.position.set(20,0,-20);
            plane.receiveShadow = true;
            scene.add(plane);
            //立方体线框
            var cubeGeometry = new THREE.BoxGeometry(16,16,16);
            var cube = new THREE.Mesh(cubeGeometry,geoMaterial1);
            cube.position.set(0,28,0);
            scene.add(cube);
            //立方体
            var cube2 = new THREE.Mesh(cubeGeometry,geoMaterial2);
            cube2.position.set(0,8,0);
            cube2.castShadow = true;
            scene.add(cube2);
            //球体
            var sphereGeometry = new THREE.SphereGeometry(6,20,20);
            var sphereMaterial = new THREE.MeshLambertMaterial({
                color:color.fromArray(randomColor())
            })
            var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
            sphere.position.set(0,26,0);
            sphere.castShadow = true;
            scene.add(sphere);

            var ambientLight = new THREE.AmbientLight(0x666666);
            scene.add(ambientLight);
            var SpotLight = new THREE.SpotLight(0xFFFFFF);
            SpotLight.position.set(-60,60,-60);
            SpotLight.castShadow = true;
            scene.add(SpotLight);

            document.body.appendChild(renderer.domElement);
            renderer.render(scene,camera);
            function run() {
                cube.rotation.y -= 0.1;
                cube.rotation.x -= 0.1;
                cube.rotation.z -= 0.1;
                cube2.rotation.y += 0.1;
                renderer.render(scene,camera);
                setTimeout(run,100);
            }
            run();
        }
        main();
    </script>