Как обнулить одно измерение в кубе - PullRequest
Новая
       6

Как обнулить одно измерение в кубе

0 голосов
/ 25 мая 2020

Я хочу создать куб, но хочу иметь возможность обнулить одно измерение, чтобы он стал двухмерным, как лист бумаги.

Я пробовал это: 

var cubeGeometry = new THREE.BoxGeometry(10, 0, 10);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xF7F7F7});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

, но это не сработало.

Даже если я обнулю все параметры куба, это все равно куб.

1 Ответ

1 голос
/ 25 мая 2020

Можете ли вы просто установить масштаб в одном измерении на какое-то небольшое число, например 0,00001?

(примечание: вы не можете установить масштаб на 0, потому что нормали рухнут) 

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/examples/jsm/controls/OrbitControls.js';
import {GUI} from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 45;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 10, 20);

  const controls = new OrbitControls(camera, canvas);
  controls.target.set(0, 5, 0);
  controls.update();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color('white');

  {
    const planeSize = 40;

    const loader = new THREE.TextureLoader();
    const texture = loader.load('https://threejsfundamentals.org/threejs/resources/images/checker.png');
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.magFilter = THREE.NearestFilter;
    const repeats = planeSize / 2;
    texture.repeat.set(repeats, repeats);

    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
    const planeMat = new THREE.MeshPhongMaterial({
      map: texture,
      side: THREE.DoubleSide,
    });
    const mesh = new THREE.Mesh(planeGeo, planeMat);
    mesh.rotation.x = Math.PI * -.5;
    scene.add(mesh);
  }

  let cube;
  {
    const cubeSize = 4;
    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
    const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
    cube = new THREE.Mesh(cubeGeo, cubeMat);
    cube.position.set(cubeSize + 1, cubeSize / 2, 0);
    scene.add(cube);
  }
  let sphere;
  {
    const sphereRadius = 3;
    const sphereWidthDivisions = 8;
    const sphereHeightDivisions = 4;
    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
    const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8', flatShading: true});
    sphere = new THREE.Mesh(sphereGeo, sphereMat);
    sphere.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
    scene.add(sphere);
  }
  let cube2;
  {
    const cubeSize = 4;
    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
    const cubeMat = new THREE.MeshPhongMaterial({color: '#F48'});
    // by parenting to an object3d we can squish on some aribtrary axis
    cube2 = new THREE.Object3D();
    cube2.position.set(0, cubeSize * 2, 0);
    scene.add(cube2);
    const cube = new THREE.Mesh(cubeGeo, cubeMat);
    cube.rotation.set(0.7, 0.5, 0);
    cube2.add(cube);
  }  
  const gui = new GUI();
  gui.add(sphere.scale, 'x', 0.0001, 1, .000001).name('sphere scale');
  gui.add(cube.scale, 'x', 0.0001, 1, .000001).name('cube scale');
  gui.add(cube2.scale, 'x', 0.0001, 1, .000001).name('cube2 scale');

  [
    [[-4, 90, 10], [-5, 0, 0]],
    [[ 3,  5,  4], [ 0, 9, 0]],
  ].map((pt) => {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(...pt[0]);
    light.target.position.set(...pt[1]);
    scene.add(light);
    scene.add(light.target);
  });

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render(time) {
    time *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }
    
    sphere.rotation.x = time;
    sphere.rotation.y = time;
    cube.rotation.x = time;
    cube.rotation.y = time;
    cube2.rotation.x = time;
    cube2.rotation.y = time;

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();
</script>
...