Three.js PlaneBufferGeometry 不渲染答案

【问题标题】：Three.js PlaneBufferGeometry not renderingThree.js PlaneBufferGeometry 不渲染
【发布时间】：2018-09-10 11:23:15
【问题描述】：

我无法渲染 planeBufferGeometry。不知道我做错了什么。这是我第一次尝试使用 BufferGeometry。如果我用 Geometry.Sphere 或任何其他 Geometry 对象替换代码，这很好用。

   
var geometry = new THREE.PlaneBufferGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xCC0000, side: THREE.DoubleSide} );
var plane = new THREE.Mesh( geometry, material );

scene.add(plane);
    
    function update () {
      // Draw!
      renderer.render(scene, camera);

      // Schedule the next frame.
      requestAnimationFrame(update);
    }

    // Schedule the first frame.
    requestAnimationFrame(update);

相机位置

const WIDTH = window.innerWidth; const HEIGHT = window.innerHeight;

// Set some camera attributes.
const VIEW_ANGLE = 45;
const ASPECT = WIDTH / HEIGHT;
const NEAR = 0.1;
const FAR = 10000;

// Get the DOM element to attach to
const container =
    document.querySelector('#container');

// Create a WebGL renderer, camera
// and a scene
const renderer = new THREE.WebGLRenderer();
const camera =
    new THREE.PerspectiveCamera(
        VIEW_ANGLE,
        ASPECT,
        NEAR,
        FAR
    );

const scene = new THREE.Scene();

谢谢

【问题讨论】：

你在使用THREE.PlaneGeometry()时看到你的对象了吗？
不，我也看不到 Three.PlaneGeometry()。
那你的相机在什么位置？
const camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
我说的是camera.position

标签： three.js buffer-geometry

【解决方案1】：

只是一个实例化缓冲平面的代码示例：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10); // set the position of the camera
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var geometry = new THREE.PlaneBufferGeometry(5, 20, 32, 32);
var material = new THREE.MeshBasicMaterial({
  color: 0xCC0000,
  side: THREE.DoubleSide
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);

render();

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

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

【讨论】：