小编gma*_*man的帖子

我有下一个问题。我有一个用 Three.js +orbitControls.js 制作的用于相机处理的项目。有一个场景，上面有一个简单的立方体和相机。我有一个来自orbitControls.js 的相机，当我做鼠标滚轮时，它会朝屏幕中心放大/缩小（默认行为）。我需要修改它，以便将放大/缩小到 3D 对象上的鼠标位置，就像在 3D 编辑器中一样，如 3D Max、搅拌机。

我确实理解逻辑应该是这样的：从您开始缩放的位置获取鼠标的位置，实际上您想要放大的位置，存储该值，放大并获取新的鼠标位置，找到之间的偏移量第一个鼠标位置和当前，并在放大期间将相机移动到该偏移量。但是，它无法正常工作。大多数情况下，我认为这可能是我的相机坐标的问题，以及我想放大的位置。

这是我的代码：

 window.onload = function() {

        var renderer = new THREE.WebGLRenderer();
        var width = 640;
        var height = 480;
        renderer.setSize( width, height );
        var div = document.getElementById('canvas')
        div.appendChild( renderer.domElement );

        var scene = new THREE.Scene();

            camera = new THREE.PerspectiveCamera(
            70,
            width / height,
            0.1,
            10000
        );
        camera.position.set( 0, 10, 10 );
        camera.lookAt( scene.position );

        control = new THREE.OrbitControls( camera );

        var geometry = new THREE.CubeGeometry( 5, 5, 5 ); …

为了避免XY问题,让我解释一下我来自哪里.我想使用THREE.js绘制使用相同时间轴堆叠在一起的大量波形.波形只是THREE.Line和我正在通过修改正交相机的视图边界来实现这些波形的缩放/平移/缩放.

我最初尝试完成这项工作,这使我创建了多个具有固定高度的画布元素,彼此堆叠在一起,并将THREE.WebGLRenderer附加到每个画布上.这非常有效,直到我尝试将其缩放到15个左右的波形,其中THREE.js给了我一个警告"太多活动的webgl上下文",并开始删除旧的上下文.

我觉得这是一个不错的做法,考虑到这里应用的技术相同:http://threejs.org/examples/#webgl_multiple_canvases_grid

在此示例中,创建了4个WebGLRenderer,每个画布一个.

那么,是否有可能以某种方式覆盖此警告,并创建无限数量的canvas元素,每个元素都有自己的渲染器？

在旁边:

我已经考虑过使用一个场景并在其中相应地定位波形,并使用多个摄像机,其方法类似于http://threejs.org/examples/#webgl_multiple_views.

问题有两方面:

(1)我失去了在每个波形的基础上进行dom操作并轻松连接键和鼠标监听器的能力.

(2)这个解决方案似乎也没有扩展.一旦渲染器的高度超过6000px高度,它就会开始进入某种类型的腐败状态,并且部分场景不会出现,其余内容会出现拉伸以进行补偿.

感谢任何能提供帮助的人!

我有一个带有纹理地板平面的three.js场景,需要一个非常特定的视角来与静态2D叠加层对齐

我的问题是,我越多地增加相机FOV以获得我需要的视角,前景延伸越多,我不希望这样.我似乎需要一个非常高的FOV(~120-150)来使纹理跟随墙壁,这是如此之高,以至于相机正在将物体定位在它后面.我需要将相机几乎移动到场景的中心,以显示整个楼层,这只是感觉不对.如何调整此场景,以便在没有失真的情况下获得正确的视角？

实例:http://warriorhut.net/testing/shapes/backend/room/view.basic.php

相关的相机设置是:

var WIDTH = 1024;
var HEIGHT = 683;
var FOV = 140; // Increases perspective as it goes higher but also distortion

camera =  new THREE.PerspectiveCamera(FOV, WIDTH/HEIGHT, .1, 3000);

camera.position.x = 0;
camera.position.y = 200;
camera.position.z = 0;  
//camera.lookAt(scene.position);
camera.lookAt(new THREE.Vector3( 0, 100, -400 )); // look at the back of the room
camera.updateProjectionMatrix();

我正在使用已应用颜色的 MeshBasicMaterial。

var material = new THREE.MeshBasicMaterial({color: myColor});

有时我需要向材质添加纹理

material.map = new THREE.ImageUtils.loadTexture(...);

这工作正常，但材质的颜色正在给纹理着色。

我意识到我可以将材质的颜色更改为白色以消除这种着色，但找不到删除材质颜色或更改颜色和纹理混合方式的方法 - 这可能吗？我试图避免创建新材料并尽可能避免更换。

Lee Stemkoski 的示例中演示了 - 将地图更改为“草”，然后更改材质颜色

http://trijs.org/docs/scenes/material-browser.html#MeshBasicMaterial

我有一个带有两个collada物体和一个定向灯的场景.第一个collada几乎是一个平面,第二个是由多个盒子组成.

看起来当渲染场景时,一些"侧面"阴影确实被剥离,尽管在地面上投射的阴影很好地渲染.

.

当我正在寻找答案时,我发现它可能是我的collada的一个问题,所以我在场景中添加了一个基本的立方体(最重要的一个),但似乎它有同样的问题.

有没有人有提示或已经知道这个问题？

我正在使用最后三个.js版本atm(r71),在Google Chrome和Mozilla Firefox(MacOS)上测试过.我已经尝试调整定向灯的所有阴影*属性,除了与shadowCascade(我不使用)相关的属性.我还测试了调整与阴影相关的渲染器的属性.

这是我的灯光设置:

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.target.position = THREE.Vector3(0, 0, 0);
directionalLight.position.set( 250, 500, 250 );
directionalLight.castShadow = true;
directionalLight.shadowCameraNear = 100;
directionalLight.shadowCameraFar = 1000;
directionalLight.shadowMapWidth = 2048;
directionalLight.shadowMapHeight = 2048;
directionalLight.shadowBias = 0.0001;
directionalLight.shadowDarkness = 0.5;
directionalLight.shadowCameraLeft = -300;
directionalLight.shadowCameraRight = 300;
directionalLight.shadowCameraTop = 300;
directionalLight.shadowCameraBottom = -300;
directionalLight.shadowCameraVisible = true;

我的collada对象有点大,我的shadowCamera边界也是如此.

我的渲染器设置:

renderer = new THREE.WebGLRenderer( {antialias: true} );
renderer.setClearColor(0x222222);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType …

代码演示问题(注释/取消注释gl_Position顶点着色器中的行)

    var scene;
    var book;
    var shaderMaterial;

    var renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setClearColor(0x000000);
    document.body.appendChild(renderer.domElement);

    var camera = new THREE.PerspectiveCamera(55, 1, 0.1, 40000);


    window.onresize = function () {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    };
    window.onresize();

    scene = new THREE.Scene();

    camera.position.z = 25;
    camera.position.y = 15;
    scene.add(camera);


    var grid = new THREE.GridHelper(100, 10);
    scene.add(grid);


    var controls = new THREE.OrbitControls(camera);
    controls.damping = 0.2;
    var lettersPerSide = 16;

    function createGlpyhSheet() {

        var fontSize = 64;

        var …

有可能让React移动一个元素而不是在它改变它在DOM中的位置时重新创建它吗？

让我们假设我正在创建一个2窗格组件,我希望能够隐藏/取消隐藏一个窗格.我们也可以想象窗格本身很重.在我的例子中,每个窗格都有超过2000个元素.

在我的实际代码中,当有2个窗格时,我正在使用分割器.为了只显示一个窗格,我需要删除拆分器并用div替换它.

下面的代码模拟了这一点.如果有一个窗格,则使用a div来包含窗格.如果有2个窗格pre用于包含它们.在我的情况下,它将是div1痛苦和splitter2.

因此,document.createElement我发现不仅创建了容器,而且还重新创建了内部元素.换句话说,在我的代码中,当从splitter-> div开始时,2000+元素窗格将完全重新创建,这很慢.

有没有办法有效地告诉React."嘿,不要重新创建这个组件,只是移动它？"

class TwoPanes extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const panes = this.renderPanes();
    if (panes.length === 2) {
      return React.createElement('pre', {className: "panes"}, panes);
    } else {
      return React.createElement('div', {className: "panes"}, panes);
    }
  }
  renderPanes() {
    return this.props.panes.map(pane => {
      return React.createElement('div', {className: "pane"}, pane);
    });
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      panes: [
        "pane …

我有一个问题,闪烁的THREE.Points取决于他们的UV坐标,如下面的代码中所示:http://codepen.io/anon/pen/qrdQeY？edit = 0010

codepen中的代码尽可能缩小(171行),但总结一下我在做什么:

• 使用THREE.Points渲染精灵
• BufferGeometry包含每个sprite的spritesheet索引和位置
• 带有自定义顶点和像素着色器的RawShaderMaterial,用于查找给定索引的精灵的UV坐标
• 一个128x128px spritesheet与4x4细胞包含精灵

这是代码:

/// FRAGMENT SHADER ===========================================================
const fragmentShader = `
precision highp float;

uniform sampler2D spritesheet;

// number of spritesheet subdivisions both vertically and horizontally
// e.g. for a 4x4 spritesheet this number is 4
uniform float spritesheetSubdivisions;

// vParams[i].x = sprite index
// vParams[i].z = sprite alpha
varying vec3 vParams;

/**
 * Maps regular UV coordinates spanning the entire spritesheet
 * to a specific sprite within the spritesheet based …

我对 Chart.js 有问题。

我想要一个警报，当我单击图表中的一个点时，向我显示数据集中设置的 ID 值。

我试过使用getElementsAtEvent(evt);，但它没有按我预期的那样工作。

有人可以帮助我吗？谢谢！

var ctx = document.getElementById("myChart");
var color = ["#ff6384", "#5959e6", "#2babab", "#8c4d15", "#8bc34a", "#607d8b", "#009688"];

var scatterChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
        label: 'Linea A',
        backgroundColor: "transparent",
        borderColor: color[1],
        pointBackgroundColor: color[1],
        pointBorderColor: color[1],
        pointHoverBackgroundColor: color[1],
        pointHoverBorderColor: color[1],
        data: [{
          x: "2014-09-02",
          y: 90,
          id: '1A'
        }, {
          x: "2014-11-02",
          y: 96,
          id: '2A'
        }, {
          x: "2014-12-03",
          y: 97,
          id: '3A'
        }]
      },
      {
        label: 'Linea …

在此rand()Three.js 着色器示例中，使用名为（以 avec2作为参数）的函数来生成随机数。

但是，该函数未在着色器代码中定义。相反，它似乎包含在使用#include <common>（片段着色器的第一行）中。

我猜它#include的工作原理有点像 C/C++，但它到底<common>指的是什么？是外部文件吗？它是 Three.js 特有的东西还是一般也适用于 WebGL/GLSL？