javascript - 在 Three.js 中旋转立方体纹理
问题描述
我在 Three.js 中得到了这个立方体纹理。假设我想将 cubeTexture 本身旋转 180 度。我知道我可以通过旋转相机来做到这一点,但我想旋转纹理本身而不是相机。我怎样才能做到这一点?
我想旋转 cubeTexture 的 x 轴,使其显示对面。类似的东西texture.flipX = true;
会很方便。
https://codepen.io/haangglide/pen/GRZPqaw
var camera, scene, box, renderer;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
scene = new THREE.Scene();
const texture = new THREE.CubeTextureLoader()
.setCrossOrigin('') .setPath('https://alca.tv/static/codepen/pens/common/SwedishRoyalCastle/').load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
scene.background = texture;
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: new THREE.Color('skyblue') });
box = new THREE.Mesh(geometry, material);
scene.add(box);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
scene.add(camera);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
解决方案
编辑:
根据下面的讨论,用 ThreeJS 做你所要求的似乎并不容易,甚至不可能,但在第一个链接中确实提到了使用 BabylonJS 可能是可能的。
https://discourse.threejs.org/t/rotate-a-scenes-background-skybox-texture/12199 https://discourse.threejs.o9rg/t/rotate-a-scenes-background/3928/15
原答案:
你没有说哪个轴,所以我只使用 Y 轴。我也使用 45 度而不是 180 度,所以你可以看到它正在工作。
var camera, scene, box, renderer;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
scene = new THREE.Scene();
const texture = new THREE.CubeTextureLoader()
.setCrossOrigin('') .setPath('https://alca.tv/static/codepen/pens/common/SwedishRoyalCastle/').load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
scene.background = texture;
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: new THREE.Color('skyblue') });
box = new THREE.Mesh(geometry, material);
///
///
///
///////////////////////////////
//since threejs uses radians, you will need a function to get radians from degrees
function getRadians(degrees) {
return Math.PI / 180 * degrees;
}
//using rotation.set(x, y, z)
box.rotation.set(0, getRadians(45), 0);
//directly setting the rotations
box.rotation.y = getRadians(45);
///////////////////////////////
///
///
///
scene.add(box);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
scene.add(camera);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
<script src="https://threejs.org/build/three.js"></script>
推荐阅读
- reactjs - 使用第三方控件在 Jest/Enzyme/ReactTS 中难以模拟单元测试事件
- android - 尝试在空对象引用上调用虚拟方法 尝试在空对象引用上调用虚拟方法 android.widget.EditText.getText()
- typescript - for..in 循环属性在“字符串”类型上不存在
- biopython - SearchIO.parse xml 爆炸和 & 符号 cElementTree.ParseError: not well-formed (invalid token) 错误
- packet - 如何在痘控制器中阻止数据包?
- swift - Xcode/Swift 代码折叠
- ios - 检测 WebView 何时在 Swift4 中完成加载?
- ethereum - 智能合约能否自动向以太坊区块链中的用户地址发送消息
- google-chrome-extension - 仅在重新启动 Chrome 浏览器后:未发送 chrome.runtime.sendMessage() 或未调用 chrome.runtime.onMessage 侦听器函数
- c++ - 使用windows.h C++时如何避免使用全局变量