|
|
| Line 20: |
Line 20: |
| | </style> | | </style> |
| | <script> | | <script> |
| − | window.onload = function() {
| |
| − | let lightIntensity = 1.4;
| |
| − | let windowHalfX = window.innerWidth/2;
| |
| − | let windowHalfY = window.innerHeight/2;
| |
| | | | |
| − | let WIDTH = window.innerWidth;
| |
| − | let HEIGHT = window.innerHeight;
| |
| − | let SPEED = 0.01;
| |
| − |
| |
| − | let cube = null;
| |
| − |
| |
| − | init();
| |
| − | animate();
| |
| − |
| |
| − | function init() {
| |
| − |
| |
| − | container = document.createElement('div');
| |
| − | document.body.appendChild(container);
| |
| − | scene = new THREE.Scene();
| |
| − |
| |
| − | // initCamera
| |
| − | camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 500);
| |
| − | camera.position.set(0, 3.5, 10);
| |
| − | camera.lookAt(scene.position);
| |
| − |
| |
| − | // initMesh
| |
| − | let size = 3;
| |
| − | let geometry = new THREE.BoxGeometry( size, size, size );
| |
| − | for ( var i = 0; i < geometry.faces.length; i ++ ) {
| |
| − | geometry.faces[i].color.setHex(Math.random() * 0xffffff);
| |
| − | }
| |
| − | let material = new THREE.MeshBasicMaterial( { color: 0xffffff, vertexColors: THREE.FaceColors } );
| |
| − | cube = new THREE.Mesh( geometry, material );
| |
| − | cube.translation = THREE.GeometryUtils.center(geometry);
| |
| − | scene.add( cube );
| |
| − |
| |
| − | // initLight
| |
| − | light = new THREE.PointLight(0xffffff, lightIntensity);
| |
| − | light.position.set(50,50,50);
| |
| − | scene.add(light);
| |
| − | console.log(scene.children);
| |
| − |
| |
| − | // initRenderer
| |
| − | renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
| |
| − | renderer.setPixelRatio(window.devicePixelRatio);
| |
| − | renderer.setSize(WIDTH, HEIGHT);
| |
| − | renderer.sortObjects = false;
| |
| − |
| |
| − | container.appendChild(renderer.domElement);
| |
| − | }
| |
| − |
| |
| − | function onResize() {
| |
| − | windowHalfX = window.innerWidth/2;
| |
| − | windowHalfY = window.innerHeight/2;
| |
| − | camera.aspect = window.innerWidth/window.innerHeight;
| |
| − | camera.updateProjectionMatrix();
| |
| − | renderer.setSize(window.innerWidth, window.innerHeight);
| |
| − | }
| |
| − |
| |
| − | function rotateMesh() {
| |
| − | if (!cube) {
| |
| − | return;
| |
| − | }
| |
| − | cube.rotation.x -= SPEED*2;
| |
| − | cube.rotation.y -= SPEED;
| |
| − | cube.rotation.z -= SPEED*3;
| |
| − | }
| |
| − |
| |
| − | function render() {
| |
| − | renderer.render(scene,camera);
| |
| − | rotateMesh();
| |
| − | }
| |
| − |
| |
| − | function animate() {
| |
| − | requestAnimationFrame(animate);
| |
| − | render();
| |
| − | }
| |
| − |
| |
| − | window.addEventListener('resize',onResize,false);
| |
| − | }
| |
| | </script> | | </script> |
| | | | |
| | | | |
| | </html> | | </html> |
