javascript - three.js 纹理未显示且为黑色
问题描述
我正在尝试用飞机创建一个简单的场景。会有质感
这是代码:https ://jsfiddle.net/0w6vfLt4/1/
但是质地是黑色的。如果你换成map: texture
你color: white
会看到一个白色的飞机。意味着其他一切都在工作,但质地
我究竟做错了什么?以及如何解决这个问题?
解决方案
尝试使用带有回调的加载函数,如https://threejs.org/docs/index.html#api/en/loaders/TextureLoader 并将纹理设置为重复,如https://threejs.org/docs/ #api/en/textures/Texture.repeat
//Create a scene, camera and a renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//Load the texture
var loader = new THREE.TextureLoader();
loader.load(
"https://cdn.glitch.com/62a3a7d1-3c19-4fb7-b1ef-a1c65ba38596%2Fboard.svg?v=1577426114562",
function (texture) {
var material = new THREE.MeshBasicMaterial({ map: texture });
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
//Create a 8x8 plane with texture
var geometry = new THREE.PlaneBufferGeometry(8, 8);
//var material = new THREE.MeshBasicMaterial({ map: texture });
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
//Render the scene
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);
},
undefined,
function ( err ) {
console.error( 'An error happened.' );
}
);
body {
margin: 0;
font-family: monospace;
}
canvas {
width: 100%;
height: 100%;
}
<script src="https://threejs.org/build/three.js"></script>
推荐阅读
- javascript - 使用 Bootstrap 模板闪烁的 Sticky Nav 活动按钮
- node.js - 如何在 Node.js 中捕获(或抑制)“PayloadTooLargeError:请求实体太大”错误?
- google-cloud-dataflow - 核心和工人之间是什么关系?
- javascript - 为什么我的 React Function 组件没有出现?
- python - Python - 提取以特定子字符串开头的文本
- python - 如何使用带有 pandas 和 matplotlib 的两个 csv 文件在一个图中创建多个图?
- pandas - Pandas DataFrame 和 NumPy 数组怪异——df.to_numpy()、np.asarray(df) 和 np.array(df) 给出不同的内存使用情况
- java - “java:没有找到适合排序的方法(java.util.ArrayList
, >)" - swift - 如何从存储在 Core Data SwiftUI 中的数据计算平均值
- delphi - Delphi 6 项目大小限制