尝试使用控件制作3D立方体

时间:2019-02-10 13:24:12

标签: javascript three.js

我正在尝试使用-> three.js中的控件创建3D立方体 我也不知道怎么了 我不确定我是否应该下载超过Three.js的内容

当我尝试创建静态多维数据集时,它也起作用,并且当我尝试使其连续移动时 但是为什么我不能用光标控制它?

    <script src="three.js"></script>
    <script>

        // Our Javascript will go here.
        var camera, controls, scene, renderer;
        init();
        animate();

        function init() {
            scene = new THREE.scene();
            scene.background = new THREE.color(0xffffff);

            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            camera = new THREE.OrbitControls(camera, renderer.domElement);

            controls.enableDamping = true;
            controls.dampingFactor = 0.25;

            controls.screenSpacePanning = false;

            controls.minDistance = 100;
            controls.maxDistance = 500;

            controls.maxPolarAngle = Math.PI / 2;

            var geometry = new THREE.BoxGeometry(1,1,1);
            var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            var cube = new THREE.Mesh(geometry,material);
            scene.add(cube);

            var light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 1, 1, 1 );
            scene.add( light );
            var light = new THREE.DirectionalLight( 0x002288 );
            light.position.set( - 1, - 1, - 1 );
            scene.add( light );
            var light = new THREE.AmbientLight( 0x222222 );
            scene.add( light );

            window.addEventListener( 'resize', onWindowResize, false );


        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }

        function animate() {
            requestAnimationFrame( animate );
            controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
            renderer.render( scene, camera );
        }
        animate();



    </script>

0 个答案:

没有答案