主页 / coding / 问题

问题[three.js](coding)

Martin Hope
leon
Asked: 2025-04-28 18:56:11 +0800 CST
  • 5

在 camera-controls 源代码中，有一个视图偏移的示例。如何使用包装在“@react-three/drei”中的 CameraControls 来实现这个功能？

let offsetUpdated = false;
const viewOffset = new THREE.Vector2();
const cameraControls = new CameraControls( camera, renderer.domElement );
cameraControls._truckInternal = ( deltaX, deltaY ) => {

    viewOffset.x += deltaX;
    viewOffset.y += deltaY;

    camera.setViewOffset(
        width,
        height,
        viewOffset.x,
        viewOffset.y,
        width,
        height,
    );
    camera.updateProjectionMatrix();
    offsetUpdated = true;

}

示例来源：查看代码

现场演示：查看演示

更新：

@Łukasz-daniel-mastalerz 非常感谢！你的代码可以运行，但是有一个奇怪的着色问题MeshReflectorMaterial。我复制了你的代码，并添加了更多对象：我的场景演示

平移后出现奇怪的阴影： 阴影问题

three.js
Martin Hope
Victoria Stuart
Asked: 2025-01-07 07:11:08 +0800 CST
  • 5

我如何为此处显示的图表指定宽度 - 例如作为嵌套的填充元素？如图所示，图表占据了整个页面宽度；我想指定一个尺寸，例如 800px x 600px。

是否有可能使用 CSS 解决方案，例如包含<div id="3d-graph"></div>在另一个 DIV 元素中？

代码来源： https: //github.com/vasturiano/3d-force-graph（“图像作为节点”）

<head>
  <script src="//unpkg.com/3d-force-graph"></script>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nam ut fringilla enim. </p>

<div id="3d-graph"></div>

<p>Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam.</p>

<script type="module">
  import SpriteText from "https://esm.sh/three-spritetext";

  const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
    .jsonUrl('https://raw.githubusercontent.com/vasturiano/3d-force-graph/c8019651c7a851ebcd7ef595123b631fe6eca3eb/example/datasets/miserables.json')
    .nodeAutoColorBy('group')
    .nodeThreeObject(node => {
        const sprite = new SpriteText(node.id);
        sprite.material.depthWrite = false;
        sprite.color = node.color;
        sprite.textHeight = 6;
        return sprite;
      });
</script>
</body>

three.js
Martin Hope
Pershing
Asked: 2024-09-16 06:02:27 +0800 CST
  • 5

研究three.webgpu.js的代码时，我遇到了“线性深度”、“透视深度”和“正交深度”这些术语。我知道透视投影和正交投影之间存在视觉差异，但为什么viewZ不同投影之间的值会有所不同？此外，线性深度只是正交深度的另一个名称吗？

在研究了函数viewZToOrthographicDepth和之后viewZToPerspectiveDepth，我注意到没有viewZToLinearDepth函数，于是受到了启发，提出了这个问题。

const viewZToOrthographicDepth = (viewZ, near, far) => viewZ.add(near).div(near.sub(far));
const viewZToPerspectiveDepth = (viewZ, near, far) => near.add(viewZ).mul(far).div(far.sub(near).mul(viewZ));

注意：我特别指的是每种投影类型之间的深度（z）值。

three.js
Martin Hope
Parisa Shahbazi
Asked: 2024-08-05 19:41:08 +0800 CST
  • 4

我是一名 Three.js 开发人员。我最近也知道“thatopencompany”的 ifc 文件（BIM）。

我们想要创建一个像https://planner5d.com/这样的网站。

最好的选择是什么？Three.js

或者

欧特克 APS

或者

西奥基特

？

我们需要改变纹理和材料，并替换家具等用于室内设计的物品……

3D 配置器 1

3D 配置器 2

我想创建高性能的先进 3D 室内设计配置器

拖放、更改纹理、更改模型中的对象

3D 配置器 3

3D 配置器 4

3D 配置器 5

three.js
Martin Hope
daniel
Asked: 2024-03-20 16:03:34 +0800 CST
  • 6

我已在 Three.js 场景中将 x 轴设置为向上轴。现在所有环境贴图 (hdr) 的方向都是错误的。我该如何修复？我尝试旋转 hdr 文件，但这不起作用。

this.pmremGenerator = new THREE.PMREMGenerator(renderer as any);
new RGBELoader().setDataType(THREE.UnsignedByteType).setPath('assets/').load('adams_place_bridge_1k.hdr', (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  var envMap = this.pmremGenerator.fromEquirectangular(texture).texture;
  scene.background = envMap;
  scene.environment = envMap;
  texture.dispose();
});

有立方体贴图的解决方法吗？

three.js
Martin Hope
Bernardy Gosal
Asked: 2024-02-20 22:43:17 +0800 CST
  • 7

我已经使用 gtlf 加载器将我的测试模型导入到 Threejs 中，但结果完全平坦，而不是应有的样子。它在 Threejs 编辑器中运行良好。请帮忙

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(70, innerHeight, innerWidth, 0.1, 1000);
camera.position.set = ( 0, 0, 0 );

const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const light = new THREE.DirectionalLight(0xffffff, 1);
    scene.add(light);

const controls = new OrbitControls( camera, renderer.domElement );  


const loader = new GLTFLoader();
loader.load( './scene.glb' , function (gltf) {
    console.log(gltf);   
    const model = gltf.scene;
    scene.add( model );
}, function (xhr){
    console.log((xhr.loaded/xhr.total * 100) + "% loaded")
}, function (error){
    console.log('model not loaded')
}
);

function animate(){
    requestAnimationFrame( animate );
    controls.update();
    renderer.render(scene, camera);
}
animate();

在此输入图像描述

在此输入图像描述

three.js
Martin Hope
Quicksilver
Asked: 2023-12-28 18:24:56 +0800 CST
  • 5

我正在尝试使用 React 三纤维制作一个带有点的网格。我尝试使用 LineDashedMaterial，但它并不完美。我是 Threejs 新手。知道如何使用网格或平面制作带有点的表面吗？

<Canvas frameloop="demand" camera={{ position: [75, 1, 0.1], zoom: 15 }}>
<mesh>
    <gridHelper
        material={
          new THREE.LineDashedMaterial({
            dashSize: 0.1,
            gapSize: 1,
            vertexColors: true,
          })
        }
        rotation-y={[Math.PI / 2]}
        position={[0, 12.5, 0]}
        onUpdate={(grid) => grid.computeLineDistances()}
      />
</mesh>
</Canvas>

代码沙箱：这里

我想要实现的目标是这样的

在此输入图像描述

three.js