Question

我正在尝试运行从 https://www.benzedrine.ch/3D-ODRPP.html 下载的代码

<!DOCTYPE html>
<!-- saved from url=(0056)https://www.benzedrine.ch/vistaprint/webgl-template.html -->
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <style>
        body {
            margin: 0px;
            background-color: #000000;
            overflow: hidden;
        }

        canvas {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>

    <div id="container"></div>
    <div id="info">info</div>

    <script src="/js/three.min.js"></script>
    <script src="/js/TrackballControls.js"></script>
    <script type="x-shader/x-vertex" id="vertexShader">
            varying vec3 vWorldPosition;
            void main() {
                vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
                vWorldPosition = worldPosition.xyz;
                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
            }
        </script>
    <script type="x-shader/x-fragment" id="fragmentShader">
            uniform vec3 topColor;
            uniform vec3 bottomColor;
            uniform float offset;
            uniform float exponent;
            varying vec3 vWorldPosition;
            void main() {
                float h = normalize( vWorldPosition + offset ).y;
                gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );
            }
        </script>
    <script>

        var container, camera, controls, scene, renderer;
        var mesh;

        function animate() {

            requestAnimationFrame(animate);
            controls.update();

        }

        function init() {

            camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 5000);
            camera.position.set(411, 218, 559);

            /*
                            controls = new THREE.OrbitControls( camera );
                            controls.damping = 1.0;
            */
            controls = new THREE.TrackballControls(camera, renderer.domElement);
            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.15;
            controls.addEventListener('change', render);

            scene = new THREE.Scene();
            scene.fog = new THREE.Fog(0xffffff, 1, 5000);
            scene.fog.color.setHSL(0.6, 0, 1);

            var geometry;
            var material = new THREE.MeshLambertMaterial({ color: 0x1ec876 });

            //XXX

            var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
            hemiLight.color.setHSL(0.6, 1, 0.6);
            hemiLight.groundColor.setHSL(0.095, 1, 0.75);
            hemiLight.position.set(0, 500, 0);
            scene.add(hemiLight);

            var dirLight = new THREE.DirectionalLight(0xffffff, 1);
            dirLight.color.setHSL(0.1, 1, 0.95);
            dirLight.position.set(-1, 1.75, 1);
            dirLight.position.multiplyScalar(50);
            scene.add(dirLight);

            var groundGeo = new THREE.PlaneBufferGeometry(10000, 10000);
            var groundMat = new THREE.MeshPhongMaterial({ ambient: 0xffffff, color: 0xffffff, specular: 0x050505 });
            groundMat.color.setHSL(0.095, 1, 0.75);

            var ground = new THREE.Mesh(groundGeo, groundMat);
            ground.rotation.x = -Math.PI / 2;
            ground.position.y = -0.1;
            scene.add(ground);

            var vertexShader = document.getElementById('vertexShader').textContent;
            var fragmentShader = document.getElementById('fragmentShader').textContent;
            var uniforms = {
                topColor: { type: "c", value: new THREE.Color(0x0077ff) },
                bottomColor: { type: "c", value: new THREE.Color(0xffffff) },
                offset: { type: "f", value: 33 },
                exponent: { type: "f", value: 0.6 }
            }
            uniforms.topColor.value.copy(hemiLight.color);

            scene.fog.color.copy(uniforms.bottomColor.value);

            var skyGeo = new THREE.SphereGeometry(4000, 32, 15);
            var skyMat = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide });

            var sky = new THREE.Mesh(skyGeo, skyMat);
            scene.add(sky);

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setClearColor(scene.fog.color, 1);

            container = document.getElementById('container');
            container.appendChild(renderer.domElement);

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

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);
            render();

        }

        function render() {

            renderer.render(scene, camera);
        }

        init();
        render();
    </script>

</body>

</html>

我遇到了这个错误

<块引用>

webgl-template.html:69 未捕获的类型错误：无法读取未定义的属性“domElement” 在 init (webgl-template.html:69) 在 webgl-template.html:154

这是第 69 行的代码

controls = new THREE.TrackballControls(camera, renderer.domElement);

请帮帮我。先谢谢大家！

Answer 1

它不起作用的原因是您在实际初始化变量之前使用了它们，因此您会收到一个错误，提示无法读取 undefined 的属性。在 javascript 中，如果不初始化变量，它们的值将是 undefined。

var foo; 
foo.bar; // You can't do this because foo is undefined

在您的示例中，您必须在使用 renderer 变量之前对其进行初始化。并且由于您使用了变量 scene，因此您还必须对其进行初始化。

这就是工作代码：

function init() {

    scene = new THREE.Scene();
    scene.fog = new THREE.Fog(0xffffff, 1, 5000);
    scene.fog.color.setHSL(0.6, 0, 1);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(scene.fog.color, 1);

    camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 5000);
    camera.position.set(411, 218, 559);

        
    controls = new THREE.TrackballControls(camera, renderer.domElement);
    ...

请记住，如果您在本地没有 THREE.js，则必须下载它或使用库的 url。像这样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>

Three.js “webgl-template.html:69 Uncaught TypeError: Cannot read property 'domElement' of undefined”错误

1 个答案: