小编Wes*_*ley的帖子

如何用Three.js改变CubeGeometry的宽度?

我有一个立方体几何和一个网格,我不知道如何改变宽度(或高度......我可以改变x,y和z).这是我现在所拥有的片段:

geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
// WebGL renderer here

function render(){
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    renderer.render( scene, camera );
}

function changeStuff(){
    mesh.geometry.width = 500; //Doesn't work.
    mesh.width = 500; // Doesn't work.
    geometry.width = 500; //Doesn't work.
    mesh.position.x = 500// Works!!

    render();
}
Run Code Online (Sandbox Code Playgroud)

谢谢!

编辑

找到了解决方案:

mesh.scale.x = 500;
Run Code Online (Sandbox Code Playgroud)

animation mesh three.js

17
推荐指数
2
解决办法
2万
查看次数

Three.js - 3D对象中的矩阵代表什么

综观THREE.Object3D的来源,有三个属性:matrix,matrixWorldmatrixRotationWorld.

我看到可以从中提取对象的位置,比例和旋转matrix.我还看到可以从中提取物体上一个点的世界位置matrixWorld.

我的问题:

  • matrixmatrixWorld表示相同的信息,即矩阵可以转换为matrixWorld,反之亦然?

  • matrixRotationWorld代表什么?它是干什么用的?它可以转换为matrix和/或matrixWorld

谢谢

3d matrix three.js

14
推荐指数
1
解决办法
2290
查看次数

three.js - 调整单个粒子的不透明度

我试图改变粒子的不透明度作为它们与平面的距离的函数.

这个问题描述了我的问题,一年前的答案基本上是"你不能".不透明度显然是材料的参数,而不是元素,因此单个粒子的不透明度是不可能的.

有什么改变,有什么办法可以实现吗?如果单个粒子着色是可能的,我想这不是遥不可及的.

干杯

point-clouds particle-system three.js

13
推荐指数
1
解决办法
1万
查看次数

使用three.js渲染透明对象的两侧时的工件

我尝试使用three.js渲染透明对象的两侧.位于透明对象内的其他对象也应显示.可悲的是,我得到了我不知道的文物.这是一个测试页面:https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

这是所述人工制品的图像.它们似乎源于潜在的球体几何形状. 具有混合模式的工件:THREE.AdditiveBlending = 1

有趣的是,对于混合模式THREE.SubtractiveBlending = 2,工件是不可见的. 在此输入图像描述

任何帮助赞赏!

亚历克斯

transparency three.js

12
推荐指数
2
解决办法
4157
查看次数

动态地将顶点添加到Three.js中的一行

我想出了如何在threejs中绘制一条线,问题是我需要动态地将顶点添加到线上.当我动态地向行添加顶点时,场景不会更新.

我试过了geometry.verticesNeedUpdate = true,这似乎不起作用.

three.js

12
推荐指数
2
解决办法
1万
查看次数

Three.js:在场景的角落显示世界坐标轴

这可能是一个非常基本的问题,但我还没有找到解决方案,而且一直困扰着我.我想在Maya中显示指示摄像机右下角的世界坐标方向(x,y,z)的箭头,以便在围绕对象旋转摄像机或在场景中移动时,你仍然可以识别世界坐标的方向.我试图用两种不同的方法来实现这一点,到目前为止都没有.

我有一个带有三个箭头的对象作为使用THREE.ArrowHelper该类的孩子,我们XYZ暂时会调用它.第一种方法是制作XYZ一个场景的孩子,并根据摄像机的当前位置计算出一个位置,加上摄像机指向的方向上的偏移量并进行调整,使其显示在我希望它而不是在中心的角落里的屏幕.我几乎得到了这个工作,因为箭头保持正确的旋转,但位置有点滑稽,我停止沿着这条路线,因为当移动相机时它真的是"紧张".我不确定这是性能问题还是其他问题.

第二种方法是使XYZ相机的孩子具有局部位置偏移,然后反转相机的旋转并应用反向旋转以XYZ使其匹配世界坐标.我似乎很接近使用这种方法,但我可以得到正确的位置,或正确的旋转,而不是两者.

我目前正在使用代码XYZ.matrix.extractRotation( camera.matrixWorldInverse );为我提供正确的方向XYZ,但它的定位是关闭的.如果我使用,XYZ.matrixWorld.extractRotation( camera.matrixWorldInverse );那么位置保持正常(连接到相机)但方向不会改变.

如果有人快速破解这项工作,我将不胜感激.如果你有一个比我正在追求的方法更好的方法,那么这也会有所帮助.

** - 编辑 - **应该提一下,你可以在这里找到工作版本 - (https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/)我将我的代码存储在谷歌驱动器中,但使用wamp和aliasing在本地工作意味着我在本地进行的任何更改都会在谷歌驱动器同步后立即在线反映出来.IE看起来可能会被打破.

matrix-inverse coordinate-systems rotational-matrices three.js

12
推荐指数
3
解决办法
2万
查看次数

Three.js:如何更新BufferGeometry顶点

我只需要更新一个有2个顶点的线,并且我试图使用上面这些在r58中更改的东西,但线条不能移动,我只是将其初始化:

var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', Float32Array, 2, 3);
geometry.dynamic = true;

var position = geometry.attributes.position;
position.needsUpdate = true;

var p = position.array;

var i = 0;
p[i++] = vertex1.position.x;
p[i++] = vertex1.position.y;
p[i++] = vertex1.position.z;
p[i++] = vertex2.position.x;
p[i++] = vertex2.position.y;
p[i] = vertex2.position.z;

var color = new THREE.Color();
color.g = color.b = 1 - this.value;

var material = new THREE.LineBasicMaterial({
  color: color.getHex(),
  linewidth: 5 // THIS DON'T WORKS IN WINDOWS?
});

this.model = new THREE.Line(geometry, material);
Run Code Online (Sandbox Code Playgroud)

并在更新渲染中我只是这样做: …

three.js

12
推荐指数
1
解决办法
1万
查看次数

三个js导入OBJ模型[.CommandBufferContext] RENDER警告:渲染计数或primcount为0

我收到了数以千计的错误(谷歌浏览器):

[.CommandBufferContext]RENDER WARNING: Render count or primcount is 0.
Run Code Online (Sandbox Code Playgroud)

从Bledner导出的OBJ和MTL文件,使用OBJMTLLoader.js作为加载器移动到R73之后.

有经验吗?

javascript three.js

12
推荐指数
1
解决办法
7362
查看次数

三个JS - 查找网格与平面相交的所有点

我创建了一个three.js场景,其中包含一个与网格相交的平面.我想要做的是为网格边缘穿过平面的所有位置获取一个点阵列.我已经很好地寻找解决方案,似乎找不到任何东西.

这是我目前拥有的图片:

在此输入图像描述

在这里,我突出了我想要收集的坐标:

在此输入图像描述

如果有人能指出我正确的方向,那将是最受欢迎的.

谢谢,

小号

javascript 3d three.js

12
推荐指数
1
解决办法
5292
查看次数

反应三纤维显示:“Uncaught Div 不是 THREE 命名空间的一部分!您忘记扩展了吗?”

我一直在尝试向我正在构建的应用程序添加滚动区域,但我不断收到此错误:

Uncaught Div 不属于 THREE 命名空间!您忘记延长了吗?

我对 Three.js 非常陌生,而且因为我使用 React,所以它更加复杂。

这是应用程序组件的代码(错误似乎源自:

import './App.css';
import Header from "./Header";
import WebFont from "webfontloader";
import { useEffect, useRef } from "react";
import { Canvas } from "@react-three/fiber";
import Intro from "./Intro";
import { Stars } from "@react-three/drei";
import About from "./About";
import state from "./state";

function App() {
  useEffect(() => {
    WebFont.load({
      google: {
        families: ["Cookie", "Lora", "Playfair Display", "Inknut Antiqua", "Cormorant", "Share Tech Mono"]
      }
    });
  }, []);

  const domContent = useRef(); …
Run Code Online (Sandbox Code Playgroud)

3d three.js reactjs react-three-fiber

12
推荐指数
1
解决办法
7038
查看次数