时间戳

首页 > 解决方案 > Three.js无法读取未定义的属性“制服”

three.js - Three.js无法读取未定义的属性“制服”

问题描述

我完全遵循了半透明示例（https://threejs.org/examples/?q=tran#webgl_materials_translucency），但我不知道为什么我失败了。

" var 制服 = THREE.UniformsUtils.clone(shader.uniforms);" 用这个 chrome 说：Uncaught TypeError: Cannot read property 'uniforms' of undefined。

请帮助我~~~ 万一我把我所有的代码都放在这里了。

<html>
    <head>
        <meta charset="utf-8">
        <title> 1 </title>
        <style>
            body { margin: 0; }
            canvas { display: block; }
        </style>
    </head>
<body>
    <script type="module">
        import * as THREE from './js/three.module.js';
        import { OrbitControls } from './js/OrbitControls.js';
        import { TranslucentShader } from './js/TranslucentShader.js';

        let scene, camera, renderer;

    function init(){

        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,15000);
        camera.position.set(0,500,1000);

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

        var loader = new THREE.TextureLoader();
        var imgTexture = loader.load( 'white.jpg' );
        imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;    
        var shader =  THREE.TranslucentShader;

        var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

        uniforms[ 'map' ].value = imgTexture;
        uniforms[ 'diffuse' ].value = new THREE.Vector3( 1.0, 0.2, 0.2 );
        uniforms[ 'shininess' ].value = 500;
        uniforms[ 'thicknessMap' ].value = imgTexture;
        uniforms[ 'thicknessColor' ].value = new THREE.Vector3( 0.5, 0.3, 0.0 );
        uniforms[ 'thicknessDistortion' ].value = 0.1;
        uniforms[ 'thicknessAmbient' ].value = 2;
        uniforms[ 'thicknessAttenuation' ].value = 1.2;
        uniforms[ 'thicknessPower' ].value = 3.0;
        uniforms[ 'thicknessScale' ].value = 10;

        var material = new THREE.ShaderMaterial( {
                uniforms: uniforms,
                vertexShader: shader.vertexShader,
                fragmentShader: shader.fragmentShader,
                lights: true
            } );
        material.extensions.derivatives = true;

        var geo = new THREE.BoxGeometry(100,100,100);
        var cube = new THREE.Mesh(geo,material);
        scene.add(cube);    

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

        var light = new THREE.PointLight( 0xffffff,1 );
        scene.add(light);

    }

    function animate(){
        requestAnimationFrame(animate);
        renderer.render(scene,camera);  
    }

    init();
    animate(); 


</script>

</body>
</html>

编码太难了

标签： three.js

解决方案

当您import { TranslucentShader }在代码顶部时，该示例显示您必须按如下方式访问它：

var shader = TranslucentShader;

没必要放在THREE.前面。这是创建对未定义对象的引用。

推荐阅读