[英]Getting colored plane surface instead of texture in Three.js
我正在嘗試在對象上應用紋理。 但是我沒有應用紋理,而是僅在對象上着色的平面表示如果我應用的木材紋理圖像,則它只是采用棕色之類的紋理顏色而不是實際紋理。
基本代碼如下:
var loader = new THREE.STLLoader();
var newMaterial = new THREE.MeshPhongMaterial( { color: colorValue, specular: 0xffffff, shininess: 100 } );
loader.load( './models/stl/binary/'+top, function ( newGeometry ) {
newMesh = new THREE.Mesh( newGeometry, newMaterial );
newMesh.position.set( 0,0.6, 0 );
newMesh.rotation.set(0,0.8,0);
newMesh.scale.set( 0.04, 0.04, 0.04 );
scene.add( newMesh );
我嘗試以下應用紋理:
var newMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 100, map: THREE.ImageUtils.loadTexture( "textures/table/lighttexture.jpg" ),
side: THREE.DoubleSide } );
newMaterial.map.minFilter = THREE.LinearFilter;
以上代碼的結果相同,只是應用了紋理的顏色。
var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
var newMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 100, map: texture } );
在上面的代碼上出現錯誤:
Uncaught TypeError: Cannot set property 'wrapS' of undefined
誰能告訴我,我該如何獲得物體的原始紋理?
編輯
如下面的代碼所示,紋理對於球形幾何體正常工作。
var sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
var mat = new THREE.MeshPhongMaterial();
mat.map = new THREE.ImageUtils.loadTexture(
"textures/table/lighttexture.jpg");
mat.transparent = true;
mat.side = THREE.DoubleSide;
mat.depthWrite = false;
mat.color = new THREE.Color(0xff0000);
var sphere = new THREE.Mesh(sphereGeometry, mat);
scene.add(sphere);
我懷疑您的幾何圖形沒有正確的uvs,首先嘗試紋理由三個生成的幾何圖形
geometry = new THREE.PlaneGeometry(100,100);
如果紋理顯示正確,則表示您從stl加載的幾何沒有設置uvs或值不正確(如全零)
進入uvs使用
geometry.faceVertexUvs
用於幾何
和
geometry.getAttribute("uv")
如果你有一個BufferGeometry
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.