Question

我正在做一个小项目，我需要在网上创建交互式3D场景。我用three.js导入了blender设计的对象。首先，我尝试将对象导出为JSON，但它不会导入到Web中。然后我尝试将对象导出为单独的.obj文件并逐个导入。

现在我需要让用户在Y轴上移动和旋转每个对象。因为我的设计属于House计划，我只需要旋转和移动每个房间。如果你能找到我这方面的来源，那将是很大的帮助。

这是我创建场景并逐个导入对象后的代码：

  var obj1 = {
  scene: null,
  camera: null,
  renderer: null,
  container: null,
  controls: null,
  clock: null,
  stats: null,

  init: function() { // Initialization

    // create main scene
    this.scene = new THREE.Scene();
    this.scene.fog = new THREE.FogExp2(0xcce0ff, 0.0003);

    var SCREEN_WIDTH = window.innerWidth,
        SCREEN_HEIGHT = window.innerHeight;

    // prepare camera
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 2000;
    this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    this.scene.add(this.camera);
    this.camera.position.set(0, 100, 300);
    this.camera.lookAt(new THREE.Vector3(0,0,0));

    // prepare renderer
    this.renderer = new THREE.WebGLRenderer({ antialias:true });
    this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    this.renderer.setClearColor(this.scene.fog.color);
    this.renderer.shadowMapEnabled = true;
    this.renderer.shadowMapSoft = true;

    // prepare container
    this.container = document.createElement('div');
    document.body.appendChild(this.container);
    this.container.appendChild(this.renderer.domElement);

    // events
    THREEx.WindowResize(this.renderer, this.camera);


    // prepare controls (OrbitControls)
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    this.controls.target = new THREE.Vector3(0, 0, 0);
    this.controls.maxDistance = 2000;

    // prepare clock
    this.clock = new THREE.Clock();

    // prepare stats
    this.stats = new Stats();
    this.stats.domElement.style.position = 'absolute';
    this.stats.domElement.style.left = '50px';
    this.stats.domElement.style.bottom = '50px';
    this.stats.domElement.style.zIndex = 1;
    this.container.appendChild( this.stats.domElement );

    // add spot light
    var spLight = new THREE.SpotLight(0xffffff, 1.75, 2000, Math.PI / 3);
    spLight.castShadow = true;
    spLight.position.set(-100, 300, -50);
    this.scene.add(spLight);

    // add simple ground
    var ground = new THREE.Mesh( new THREE.PlaneGeometry(200, 200, 10, 10), new THREE.MeshLambertMaterial({color:0x999999}) );
    ground.receiveShadow = true;
    ground.position.set(0, 0, 0);
    ground.rotation.x = -Math.PI / 2;
    this.scene.add(ground);

    // load a model
    this.loadModel();
  },



  loadModel: function() {

    // prepare loader and load the model
    var oLoader = new THREE.OBJMTLLoader();
    oLoader.load('models/Kitchen.obj', 'models/Kitchen.mtl', function(object) {

     // object.position.x = -200;
     // object.position.y = 0;
     // object.position.z = 100;
      object.scale.set(10, 10, 10);
      obj1.scene.add(object);
    });



    // prepare loader and load the model
    var oLoader = new THREE.OBJMTLLoader();
    oLoader.load('models/Bath.obj', 'models/Bath.mtl', function(object) {

     // object.position.x = -200;
     // object.position.y = 0;
     // object.position.z = 100;
      object.scale.set(10, 10, 10);
      obj1.scene.add(object);
    });


    // prepare loader and load the model
    var oLoader = new THREE.OBJMTLLoader();
    oLoader.load('models/Bedroom.obj', 'models/Bedroom.mtl', function(object) {

     // object.position.x = -200;
     // object.position.y = 0;
     // object.position.z = 100;
      object.scale.set(10, 10, 10);
      obj1.scene.add(object);
    });


    // prepare loader and load the model
    var oLoader = new THREE.OBJMTLLoader();
    oLoader.load('models/Closet.obj', 'models/Closet.mtl', function(object) {

     // object.position.x = -200;
     // object.position.y = 0;
     // object.position.z = 100;
      object.scale.set(10, 10, 10);
      obj1.scene.add(object);
    });


    // prepare loader and load the model
    var oLoader = new THREE.OBJMTLLoader();
    oLoader.load('models/Corridor.obj', 'models/Corridor.mtl', function(object) {

     // object.position.x = -200;
     // object.position.y = 0;
     // object.position.z = 100;
      object.scale.set(10, 10, 10);
      obj1.scene.add(object);
    });

     // prepare loader and load the model
    var oLoader = new THREE.OBJMTLLoader();
    oLoader.load('models/Potio.obj', 'models/Potio.mtl', function(object) {

     // object.position.x = -200;
     // object.position.y = 0;
     // object.position.z = 100;
      object.scale.set(10, 10, 10);
      obj1.scene.add(object);
    });

     // prepare loader and load the model
    var oLoader = new THREE.OBJMTLLoader();
    oLoader.load('models/Living.obj', 'models/Living.mtl', function(object) {

     // object.position.x = -200;
     // object.position.y = 0;
     // object.position.z = 100;
      object.scale.set(10, 10, 10);
      obj1.scene.add(object);
    });

  } 
};

// Animate the scene
function animate() {
  requestAnimationFrame(animate);
  render();
  update();
}

// Update controls and stats
function update() {
  obj1.controls.update(obj1.clock.getDelta());
  obj1.stats.update();
}

// Render the scene
function render() {
  if (obj1.renderer) {
    obj1.renderer.render(obj1.scene, obj1.camera);
  }
}

// Initialize lesson on page load
function initializeObj() {
  obj1.init();
  animate();
}

if (window.addEventListener)
  window.addEventListener('load', initializeObj, false);
else if (window.attachEvent)enter code here
  window.attachEvent('onload', initializeObj);
else window.onload = initializeObj;

Answer 1

您可以将加载的对象保存在变量中，稍后可以使用该变量将其旋转：

- 添加一个变量：oLoader.load('models/Living.obj', 'models/Living.mtl', function(object) { myObj = object; object.scale.set(10, 10, 10); obj1.scene.add(object); });

- 加载对象时，设置变量

myObj.rotation.y = Date.now()*.002;

- 在animate（）函数中，随着时间的推移旋转对象：

obj1.scene.children[4].rotation.y = Date.now()*.002;

或做其他一些事情

或者，由于您的场景结构是一致的，您可以使用

//you need to store this to know how far the mouse has moved var lastMPos = {}; //this function is called when the mouse is moved function mousemove(event){ //you can only calculate the distance if therer already was a mouse event if (typeof(lastMPos.x) != 'undefined') { //calculate how far the mouse has moved var deltaX = lastMPos.x - event.clientX, deltaY = lastMPos.y - event.clientY; //rotate your object accordingly obj1.scene.children[4].rotation.y += deltaX *.005; } //save current mouse Position for next time lastMPos = { x : event.clientX, y : event.clientY }; }

但请注意，每次更改装货单或添加灯等时都需要调整编号，所以我不推荐给你

用鼠标旋转它：

const path = require('path')
const webpack = require('webpack');

module.exports ={
    cached: true,
    debug : true,
    entry : { 
      app : './app.jsx',
    },
    module:{
        loaders: [{
              test: /\.jsx$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              query: {
                 presets: [ 'es2015', 'react', 'stage-0'],
              }
        }]
  },
  resolve:{
    extensions: ['', '.js', '.jsx']
  }
};

如何在three.js中移动和旋转导入的对象

1 个答案: