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

Jam2018 2019-07-05 04:33:34

引入OrbitControls.js后报

原因是浏览器不能识别require

然后看到这个贴子

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

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

还是不能动
咋整啊

...全文

230 2 打赏收藏举报

写回复

2 条回复

切换为时间正序

当前发帖距今超过3年，不再开放新的回复

发表回复

河南棒小伙 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>