Three.js无法读取未定义的属性“uniforms”
我完全遵循了半透明的例子，但我不知道为什么失败了 var uniforms=THREE.UniformsUtils.clone shader.uniforms；用这个chrome表示：UncaughtTypeError:无法读取未定义的属性'uniforms' 请帮帮我~~~ 以防万一我把我所有的代码都放在这里了Three.js无法读取未定义的属性“uniforms”,three.js,Three.js,我完全遵循了半透明的例子，但我不知道为什么失败了 var uniforms=THREE.UniformsUtils.clone shader.uniforms；用这个chrome表示：UncaughtTypeError:无法读取未定义的属性'uniforms' 请帮帮我~~~ 以防万一我把我所有的代码都放在这里了 <html> <head> <meta charset="utf-8"> <title> 1 &
<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>