【问题标题】:How to see back face of sphere?如何看到球体的背面?
【发布时间】:2012-12-27 07:12:42
【问题描述】:
// set the scene size
var WIDTH = 800;
var HEIGHT = 640;

// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;

var $container = $('#container');

// create a WebGL renderer, camera
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,
                                         ASPECT,
                                         NEAR,
                                         FAR);
var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 1000;

// start the renderer
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);

// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial({
  color: 0xCC0000
});

// set up the sphere vars
var radius = 50, segments = 16, rings = 16;

// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
  new THREE.SphereGeometry(radius, segments, rings),
  sphereMaterial);

sphere.position.x = 20;
sphere.doubleSided = true;

// add the sphere to the scene
scene.add(sphere);

// and the camera
scene.add(camera);

/* Light it up */
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.add(pointLight);

window.setInterval(update, 16.66666666);

var keyboard = new THREEx.KeyboardState();

function update() {
  if (keyboard.pressed("W")) {
    camera.position.z -= 5;
  } else if (keyboard.pressed("S")) {
    camera.position.z += 5;
  }

  renderer.render(scene, camera);
}

这是我的代码,这里使用 W 和 S 键的简单演示让我可以放大/缩小 3D 球体。

但是,当我“进入”球体时,我看不到它的背面,即使我输入了sphere.doubleSided = true;

我尝试输入renderer.setFaceCulling(true);(也是错误的),但他们都没有修复它。

有什么想法吗?

【问题讨论】:

    标签: html opengl-es webgl three.js


    【解决方案1】:

    在材质中使用side: THREE.DoubleSide

    您使用的是哪个版本的three.js?

    jsfiddle

    【讨论】:

      猜你喜欢
      • 2011-04-10
      • 1970-01-01
      • 2022-01-23
      • 1970-01-01
      • 2017-06-24
      • 2014-01-21
      • 1970-01-01
      • 2012-08-11
      • 2019-11-05
      相关资源
      最近更新 更多