入门THREEJS遇到的问题求大佬解惑

Jam2018 2019-07-05 04:33:34
引入OrbitControls.js后报



原因是浏览器不能识别require

然后看到这个贴子

https://blog.csdn.net/wml00000/article/details/84181227

用这个browserify方法翻译了一遍OrbitControls.js



还是不能动
咋整啊
...全文
137 点赞 收藏 2
写回复
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
河南棒小伙 2019-07-05
直观感觉是js文件有问题,去官网下一个完整的引入得了。
回复
Jam2018 2019-07-05

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>简单Demo</title>
    <script src='./three.js'></script>
    <!-- <script src='./OrbitControls.js'></script> -->
    <script src="./dist/dist.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="canvas">
    </div>
    <script>
        var threeObj = {
            scene: null,
            camera: null,
            cube: null,
            renderer: null,
            controls: null,
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight,
            initScene: function () {
                //添加坐标系
                var ax = new THREE.AxesHelper(100);
                this.scene = new THREE.Scene();
                //全局雾化
                this.scene.fog = new THREE.Fog(0xffffff, 0.015, 1000)
                this.scene.add(ax);
            },
            initCamera: function () {
                this.camera = new THREE.PerspectiveCamera(60, this.width / this.height, 0.1, 1000);
                this.camera.position.set(100, 100, 100);
                this.camera.lookAt(0, 0, 0);
            },
            initRenderer: function () {
                this.renderer = new THREE.WebGLRenderer({
                    antialias: true
                })
                this.renderer.setSize(this.width, this.height);
                this.renderer.setClearColor(0xD1BEBE);
                document.getElementById('canvas').appendChild(this.renderer.domElement);
            },
            initLight: function () {
                var light = new THREE.DirectionalLight(0x695DEE);
                light.position.set(100, 0, 10);
                this.scene.add(light);
            },
            initGeometry: function () {
                var geometry = new THREE.CubeGeometry(25, 55, 20, 3, 3, 3);
                //使用Phong光照模型的材质,适合镜面、金属等
                var material = new THREE.MeshPhongMaterial({
                    color: 0xF2415E,
                    wireframe: true
                });
                this.cube = new THREE.Mesh(geometry, material);
                this.scene.add(this.cube);
            },
            initControl: function () {
                var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
                // 使用阻尼,指定是否有惯性
                controls.enableDamping = true;
                // 动态阻尼系数 就是鼠标拖拽旋转灵敏度,阻尼越小越灵敏
                controls.dampingFactor = 0.25;
                // 是否可以缩放
                controls.enableZoom = true;
                //是否自动旋转
                controls.autoRotate = false;
                //设置相机距离原点的最近距离
                controls.minDistance = 10;
                //设置相机距离原点的最远距离
                controls.maxDistance = 600;
                //是否开启右键拖拽
                controls.enablePan = true;
                this.controls = controls;
            },
            render: function () {
                //这里不能直接用this.render,第二次调用自身时,this就变成了window
                //requestAnimationFrame的this是window对象,如同setTimeout,setinterval
                requestAnimationFrame(this.render.bind(this));
                this.cube.rotation.y += 0.01;
                this.controls.update();
                this.renderer.render(this.scene, this.camera);
            },
            init: function () {
                window.onresize = onWindowResize;
                this.initScene();
                this.initCamera();
                this.initRenderer();
                this.initLight();
                this.initGeometry();
                this.initControl();
                this.render();
            },
        }

        function onWindowResize() {
            threeObj.camera.aspect = document.documentElement.clientWidth / document.documentElement.clientHeight;
            threeObj.camera.updateProjectionMatrix();
            threeObj.renderer.setSize(threeObj.width, threeObj.height);
            threeObj.renderer.render(threeObj.scene, threeObj.camera);
        }
        threeObj.init();
    </script>
</body>

</html>
回复
相关推荐
发帖
JavaScript
创建于2007-09-28

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2019-07-05 04:33
社区公告
暂无公告