小编Ale*_*ein的帖子

我有大量的纹理和模型加载到我的项目中.我正试图在所有内容都加载时显示进度条.我认为LoadingManager正好能够跟踪所有已加载资产的进度.

我正在使用JSONLoader和TextureLoader.

如果有人可以告诉我如何实现这个示例代码将是非常棒的.

var camera, scene, renderer;

 init();
 animate();

 function init() {

   camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
   camera.position.z = 400;

   scene = new THREE.Scene();


   // Load Textures 
   var modeltexture1 = new THREE.TextureLoader().load('modeltexture1.jpg');
   var modeltexture2 = new THREE.TextureLoader().load('modeltexture2.jpg');
   var modeltexture3 = new THREE.TextureLoader().load('modeltexture3.jpg');
   var modeltexture4 = new THREE.TextureLoader().load('modeltexture4.jpg');
  
   // Materials
   var material = {
     "texture1": new THREE.MeshPhongMaterial({ map: modeltexture1 }),
     "texture2": new THREE.MeshPhongMaterial({ map: modeltexture2 }),
     "texture3": new THREE.MeshPhongMaterial({ map: modeltexture3 }),
     "texture4": new THREE.MeshPhongMaterial({ …

如果我第一次检查一个单选按钮,我会得到一个短暂的冻结.第二次检查它们一切都运行得非常顺利.我想因为他们现在在浏览器缓存中.有没有机会预先加载？

var insideMap1 = THREE.ImageUtils.loadTexture( 'insideMap1.jpg' );
var insideMap2 = THREE.ImageUtils.loadTexture( 'insideMap2.jpg' );
var insideMap3 = THREE.ImageUtils.loadTexture( 'insideMap3.jpg' );

$("input[name='opt1']").change(function() {

    if ($("#radio1").is(":checked")) {
        material[ "inside" ].map = insideMap1;
    }

    if ($("#radio2").is(":checked")) {
       material[ "inside" ].map = insideMap2;
    }

    if ($("#radio3").is(":checked")) {
       material[ "inside" ].map = insideMap3;
    }

});

如何在不覆盖现有类的情况下将已选中的单选按钮的值添加到单独的div中？

我遇到麻烦,因为我喜欢在页面加载时加载已检查单选按钮的值,我也喜欢正确更新类.我的函数覆盖现有的类而不是添加第二个类.

document.addEventListener('DOMContentLoaded', function() {
   
   var radioButtons = document.getElementsByName('color');
   var paragraph = document.querySelector('.folder');
  
    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){		
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);
        
    }
});

document.addEventListener('DOMContentLoaded', function() {
size
   var radioButtons = document.getElementsByName('size');
   var paragraph = document.querySelector('.folder');

    for(var i=0;i< radioButtons.length;i++)
    {
        var elem = radioButtons[i];
        elem.addEventListener('change',function(e){		
            console.log(paragraph);
            if(paragraph.className)
                paragraph.className = this.value;
            else
                paragraph.classList.add(this.value);
        }
        ,false);
        
    }
});

document.addEventListener('DOMContentLoaded', function() {
   
   var radioButtons = document.getElementsByName('bordercolor');
   var paragraph = document.querySelector('.folder');

    for(var i=0;i< radioButtons.length;i++)
    { …

基本上我喜欢为具有相同类名的多个元素添加一个新类.目前它只在最后一个类中添加一个类.我尝试过使用document.querySelectorAll但没有得到任何结果.我错过了什么？

HTML示例

<div class="model"></div>
<div class="model"></div>
<div class="model"></div>

JS

 _updateParagraph: function(settings, className) {
    var paragraph = document.querySelector('.' + className);
    paragraph.className = className;
    this._updateParagraphClasslist(settings, paragraph);
  },

全JS

App.Views.Preview = Backbone.View.extend({
  el: "#preview",
  initialize: function() {
    this.listenTo(this.model, "change", this.update);
  },
  update: function() {
    var

      layout = [this.model.get("model")],
      format   = [this.model.get("size"), this.model.get("color-outside"), this.model.get("color")],
      color    = [this.model.get("color-inside")],
      material = [this.model.get('material')],
      lamination = [this.model.get('lamination')],
      logo = [this.model.get('embossing')];

    this._updateParagraph(layout, 'layout');
    this._updateParagraph(format, 'front');
    this._updateParagraph(format, 'back');
    this._updateParagraph(lamination, 'kit-front');
    this._updateParagraph(lamination, 'kit-back');
    this._updateParagraph(logo, 'embossing');
    this._updateParagraph(color, 'colorinner');
    this._updateParagraph(color, 'model');


  },
  _updateParagraph: …

我有一个更大的模型来冻结我的场景。因为我从一开始就不需要这个模型，所以在后台加载这个模型会很酷。网络工作者是解决这个问题的方法吗？

任何人都可以指导我如何完成它，或者有可能吗？

谢谢。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var loader = new THREE.JSONLoader();
loader.load("models.js", function (smooth) {
    smooth.mergeVertices();
    smooth.computeFaceNormals();
    smooth.computeVertexNormals();
    var modifier = new THREE.SubdivisionModifier(1);
    modifier.modify(smooth);
    var mesh = new THREE.Mesh(smoothnew THREE.MeshBasicMaterial({
        color: 0x00ff00
    }));
    scene.add(mesh);
});

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

render();

如何使用Three.js中的新THREE.TextureLoader加载多个纹理？

目前我正在加载我的纹理:

  var texture1 = THREE.ImageUtils.loadTexture('texture1.jpg');
  var texture2 = THREE.ImageUtils.loadTexture('texture2.jpg');
  var texture3 = THREE.ImageUtils.loadTexture('texture3.jpg');
  var texture4 = THREE.ImageUtils.loadTexture('texture4.jpg');
  var texture5 = THREE.ImageUtils.loadTexture('texture5.jpg');
  ...

Google Chrome的开发者工具会发出以下警告:

THREE.ImageUtils.loadTexture已被弃用.请改用THREE.TextureLoader().

我尝试使用新的THREE.TextureLoader:

var loader = new THREE.TextureLoader();

loader.load('texture1.jpg',function ( texture1 ) {});
loader.load('texture2.jpg',function ( texture2 ) {});
loader.load('texture3.jpg',function ( texture3 ) {});
loader.load('texture4.jpg',function ( texture4 ) {});
loader.load('texture5.jpg',function ( texture5 ) {});

我究竟做错了什么？

TextureLoader

如果每个元素嵌套在一个单独的元素中,我如何计算它？

    .variant--name::before {
      counter-increment: section;
      content: "Abschnitt " counter(section) ": ";
    }

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

我想根据单选按钮选择更改多维数据集的颜色.如何通过平稳过渡实现这一目标？

单选按钮

<input id="black" type="radio" data-color="black" name="color" value="" checked="checked">
<input id="white" type="radio" data-color="white" name="color" value="">
<input id="blue" type="radio" data-color="chamois" name="color" value="">

材料

var color = {

    "black": new THREE.MeshPhongMaterial({
        color: 0x222222
    }),
    "white": new THREE.MeshPhongMaterial({
        color: 0xffffff
    }),
    "chamois": new THREE.MeshPhongMaterial({
        color: 0xEDE6D4
    })

}

几何

var geometry= new THREE.BoxGeometry(2,2,2);
var mesh = new THREE.Mesh(geometry, color [ "black" ]);
scene.add(mesh );

如果设置了某个元素，如何才能不将其排除在计数之外display: none;？

body {
  counter-reset: section;
}
.variant--name::before {
  counter-increment: section;
  content: counter(section) ": ";
}

.hidden {
  display: none;
}

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group hidden">
<h3 class="variant--name">variant</h3>
</div>

<div class="variant--group">
<h3 class="variant--name">variant</h3>
</div>

我正在尝试缩放y轴的几何形状.这使我的立方体上下都缩放.我认为mesh.transformY可以将多维数据集设置为缩放值的一半.这会让它看起来像是向上缩放的立方体.还有其他解决方案吗？

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
        color: 0xffffff
    }));

    mesh.position.set(0, 2, 0);
    mesh.scale.set(0.98, 0.95, 0.992);
    mesh.castShadow = true;
    scene.add(mesh);

    var tween = new TWEEN.Tween(mesh.scale)tween.to({y: 2}, 1000)
    tween.easing(TWEEN.Easing.Elastic.InOut);
    tween.yoyo(true);
    tween.start();

使用CSS3过渡延迟属性,我可以延迟不透明度,颜色等.

但是我怎么能用纯粹的css推迟像这样的位置呢？

.element{
    position: absolute;
    visibility: hidden;
}

// Delay with 1s 

    .demo--active .element{
        position: relative;
        visibility: visible;
        float: left;
        width: 33%;
    }