小编Wes*_*ley的帖子

我正在尝试将.stl文件加载到three.js中.一切正常,我使用此代码将模型作为BufferGeometry:

    var loader = new THREE.STLLoader();
    loader.addEventListener( 'load', function ( event )
    {

        var material = new THREE.MeshLambertMaterial({
            color: 0x888888,
            side: THREE.DoubleSide
        });

        var bufferGeometry = event.content;
        var mesh = new THREE.Mesh(geometry, material);
        scene.add( mesh );
    });
    loader.load( 'model.stl' );

为了更容易进一步操作模型,我希望将几何图形设置为常规THREE.Geometry而不是THREE.BufferGeometry.是否有可能以.stl某种方式加载,因此我可以将其作为a THREE.Geometry或者是否可以转换THREE.BufferGeometry为THREE.Geometry？或者这可能是使用.obj文件还是其他？

我创建使用一个简单的WebGL的3D全景应用SphereGeometry,PerspectiveCamera以及CanvasTexture.现在,我希望通过在某些部分添加"HotSpots"来将场景变为现实SphereGeometry.我遇到的问题是理解如何更新各种各样的,DOMElements以便他们的位置反映更新的Camera位置.

基本上,当Camera旋转时,各种DOMElements物体将相对于相机旋转的方向移入和移出视野.我试图定位<div> absolute到<canvas>和translating的X和Y使用位置返回PerspectiveCamera camera.rotation,但它并没有真正的工作; 这是我的JS和CSS实现:

CSS

#TestHotSpot {
    /* not sure if using margins is the best method to position hotspot */
    margin-top: 50px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
}

JavaScript的

/** 
   CONFIG is my stored object variable; it contains the PerspectiveCamera instance 
   code is being called …

伙计们，我知道这个问题已经被问过好几次了，有几种不同的方式，但我就是能让它发挥作用。基本上我有二维云，但我希望相机围绕漂浮在云层上方的物体旋转。问题是，当我不看云的表面时，你可以看出它们是二维的。太棒了，我希望云能够“看着”相机，无论它在哪里。我相信我的问题源于如何将云几何图形调用到飞机上，但请看一下。我将 a viewAt 函数放在我的 animate 函数中。我希望你至少能指出我正确的方向。

Three.js 版本 70...

container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(0, 0, 100);

    scene.add(camera);

    controls = new THREE.OrbitControls( camera );
    controls.target.copy( new THREE.Vector3( 0, 0,475) );
    controls.minDistance = 50;
    controls.maxDistance = 200;
    controls.autoRotate = true;
    controls.autoRotateSpeed = .2; // 30 seconds per round when fps is 60
    controls.minPolarAngle = Math.PI/4; // radians
    controls.maxPolarAngle = Math.PI/2; // radians
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;

    clock = new THREE.Clock();

    cloudGeometry = new THREE.Geometry(); …

我想知道以前是否有人遇到过这个具体问题.基于我对使用webgl和three.js绘制3d对象的基本理解,我似乎无法找到一种方法来创建一个paralelipiped(或者我认为这就是它的调用方式),它确实从cubegeometry继承了它的几何,但是没有没有90度的所有角度.

我的目标是拥有这样的东西:

结果应该与什么非常相似

-moz-transform: skew(0,-45.1deg);

会做一个HTML元素.任何人都可以帮我找到解决方案吗？

我感谢你的考虑.

我正在使用Chrome快捷方式,在目标中使用文件中的allow-file-access-to来处理我的three.js学生项目文件.但是今天早上某个时候停止了工作,看来Chrome已经更新了.我重写捷径,但没有快乐.

我正在做的项目的一部分是构建在一个普通浏览器中工作的three.js动画(我为此选择了Chrome).

有没有办法让Chrome再次允许文件访问？

谢谢.

所以我收到这个错误,我找不到它的来源.我相信它与我在我的场景中导入和创建我的3D对象有关,但我不确定我做错了什么.

这是代码:我在调用init之前调用此函数

function loadObjects()
{
loader = new THREE.JSONLoader();

var floorDiskmaterial = new THREE.MeshPhongMaterial({
    map: THREE.ImageUtils.loadTexture('img/floor_test.jpg'),
    transparent: true,
    color: 0xeaeaea,
    ambient: 0xeaeaea,
    overdraw: 0.5,
    //specular: 0x6a3e6d,
    shading: THREE.FlatShading,
    fog: false,
    //shininess: 50,
});

loader.load( "models/floorScene.js", function( geometry ) {
    FloorDiskFire = new THREE.Mesh( geometry, floorDiskmaterial);
    FloorDiskFire.position.set(0,0.2,0);
    FloorDiskFire.castShadow = true;
    FloorDiskFire.receiveShadow = true;
    FloorDiskFire.scale.set(1.5,1.5,1.5);
    //FloorDiskFire.rotation.y = -0.78;
} );

//-----Pillar Loader------//

var pillarMaterial = new THREE.MeshPhongMaterial({
    //map: THREE.ImageUtils.loadTexture('img/pillarMap.png'),
    //transparent: true,
    color: 0xeaeaea,
    ambient: 0xeaeaea,
    overdraw: 0.5,
    //specular: 0x6a3e6d,
    shading: THREE.FlatShading,
    fog: …

我刚学会使用Web GL和THREE.js

我在YouTube上关注了一个教程,结果得到了以下代码.此代码应显示多维数据集和轴.但是,当我尝试显示包含此代码的页面时,我收到Javascript错误.错误说明:

未捕获的TypeError:this.updateMorphTargets不是函数

我不确定我做错了什么,但希望有一个熟悉THREE.js的人可以帮助我.非常感谢你的时间.

jQuery(document).ready( function($){

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight,.1, 500);
    var renderer = new THREE.WebGLRenderer();

    renderer.setClearColor(0x000000);
    renderer.setSize(window.innerWidth, window.innerHeight);

    var axis = new THREE.AxisHelper(10);

    scene.add(axis);

    var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
    var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xdddddd, wireframe:true});
    var cube = THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.x = 0;
    cube.position.y = 0;
    cube.position.z = 0;

    scene.add(cube);

    camera.position.x = 40;
    camera.position.y = 40;
    camera.position.z = 40;

    camera.lookAt(scene.position);

    $('#webgl-container').append(renderer.domElement);
    renderer.render(scene, camera);

});

在three.js中,是否可以仅对选定的网格应用后处理效果？

例如,要有一个具有颗粒效果的立方体,而场景的其余部分没有它.谢谢!

来自three.js的正常轨道控制对于圆形物体是完美的,但对于长物体不好(特别是当变焦关闭时),我正在寻找解决方案来解决这个问题.

用文字描述很难,请从Google查看此webgl示例(放大最大值以查看):https://www.google.com/o3d/shopping/viewer/360？ q = erMBhK8fu3C&o3ds = use_3d

这是我正在寻找的顶视图插图:

我正在考虑基于默认OrbitControls的使用,从相机到边界框连续投射光线并保持恒定距离,但问题是相机总是在看物体的中心,不像上面的例子(凸轮只在到达时旋转)对象的角落).

任何想法将不胜感激.

如何确定点 (x,y,z) 是否位于 A 点和 B 点之间的直线上？

我想要的是一个可以执行此操作的布尔函数：

pointA        // random THREE.Vector3
pointB        // random THREE.Vector3
pointToCheck  // random THREE.Vector3
var isOnLine = THREE.pointOnLine(pointA, pointB, pointToCheck)

if (isOnLine) {
  console.log('point is on the line');
}

这是用于可视化的图像：