[英]ThreeJS Cube texture strange visual
I'm having a strange visual effect (don't know how to call it) in my project. 我的项目中有一种奇怪的视觉效果(不知道如何调用它)。 I've made a cube and made it possible to rotate.
我做了一个立方体,可以旋转。 Below I got the code which creates the cube.
下面我得到了创建立方体的代码。
Also see the image. 另见图片。 If I upscale my
segmentsWidth
and segmentsHeight
it's kinda gonna look better on the side, but on the front the lines will not be straight. 如果我升级我的
segmentsWidth
和segmentsHeight
那么它的侧面看起来会更好,但是在前面线条不会是直的。 The image is made with the code shown below. 图像使用下面显示的代码制作。 What I would like to see is the lines at the front straight and side ways it should not have a V in it.
我希望看到的是前方直线和侧面的线条,它不应该有V形。
If I have the overdraw = false
than I will see white lines which I don't want but don't got a messy picture. 如果我有
overdraw = false
,我会看到白线,我不想要,但没有一个凌乱的图片。 But when I set it to true I will have a messy picture. 但是当我把它设置为真时,我会有一个凌乱的画面。
Is this possible? 这可能吗?
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.y = 150;
camera.position.z = 250;
scene = new THREE.Scene();
// Cube
var geometry = new THREE.CubeGeometry( 100, 200, 8, 1, 1 );
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial([
new THREE.MeshBasicMaterial({ color: 0xefefef }),
new THREE.MeshBasicMaterial({ color: 0xefefef }),
new THREE.MeshBasicMaterial({ color: 0xefefef }),
new THREE.MeshBasicMaterial({ color: 0xefefef }),
new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('img/door.jpg'),
overdraw: false
}),
new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('img/door.jpg'),
overdraw: false
})
]));
cube.position.y = 150;
scene.add( cube );
This is a well-known issue with CanvasRenderer
. 这是
CanvasRenderer
一个众所周知的问题。
An excellent description of the issue can be found in the last half of this post . 在这篇文章的后半部分可以找到对该问题的出色描述。
Your best solution is to increase the tessellation of your geometry. 您最好的解决方案是增加几何体的细分。
var geometry = new THREE.BoxGeometry( 100, 200, 8, 2, 2, 2 );
PS Notice there are 6, not 5, args to this constructor. PS注意这个构造函数有6个而不是5个args。
EDIT: updated for three.js r.67 编辑:更新为three.js r.67
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.