精华内容
下载资源
问答
  • 导入gltf
    2022-04-09 15:26:31
    <template>
      <div id="container">
      </div>
    </template>
    
    <script>
    import * as Three from 'three'
    import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'
    import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
    // import {AnimationMixer} from 'Three/src/animation/'
    // import stats from 'stats.js' 
    export default {  
      data() {
        return {
          light:null,
          mesh:null,
          scene:null,
          renderer:null,
          camera:null,
          material:null,
          mixerr:null,
          plane:null,
          geometry:null,
          control:null,
          clock :new Three.Clock(),
          loader:null,
          model:null,
          planeGeometry:null,
          planeMaterial:null
        }
      },
      methods: {
        initrenderer(){
          let container = document.getElementById('container');
          this.renderer =  new Three.WebGLRenderer()
          this.renderer.setSize(container.offsetWidth,container.offsetHeight)
          container.appendChild(this.renderer.domElement)
        },
        initcamera(){
          // let container = document.getElementById('container');
          this.camera=new Three.PerspectiveCamera(45,window.innerWidth/innerHeight,1,1000)
          this.camera.position.set(0,100,200)
          this.camera.lookAt(new Three.Vector3(0, 0, 0));
        },
        initcontrol(){
          this.control = new OrbitControls(this.camera, this.renderer.domElement);
        },
        initscene(){
          this.scene = new Three.Scene()
        },
        // initlight(){
        //   this.light =new Three.DirectionalLight('white',0.1)//平行光 颜色和强度
        //   this.light.position.set(20,50,50)
        //   // light.intensity=
        //   this.light.distance=10
        //   this.scene.add(this.light)
        //   this.scene.add(new Three.AmbientLight('white'))//环境光   
        // },
        initmesh(){
          let self = this;
         var planeGeometry = new Three.PlaneGeometry(100, 100);
          var planeMaterial = new Three.MeshNormalMaterial();
          self.plane = new Three.Mesh(planeGeometry, planeMaterial);
          self.plane.rotation.x = -0.5 * Math.PI;
          self.plane.position.y = -5;
          self.plane.receiveShadow = true; //可以接收阴影
          self.scene.add(self.plane);
          self.loader = new GLTFLoader()
          self.loader.load("fly.gltf",function(gltf){
             var model = gltf.scene
            console.log(model);
            model.position.set(1,1,0)
            self.scene.add(model)
            self.mixerr = new Three.AnimationMixer(model)
            self.mixerr.clipAction( gltf.animations[ 0 ] ).play();
          })
        },
        animate(){
          this.control.update()
          // console.log(this.mixerr);
          requestAnimationFrame(this.animate);
          let time = this.clock.getDelta()
          if (this.mixerr) {
            this.mixerr.update(time)
          }
          this.renderer.render(this.scene,this.camera);
        }
      },
      mounted() {
        this.initrenderer()
        this.initcamera()
        this.initscene()
        // this.initlight()
        this.initcontrol()
        this.initmesh()
        this.animate()
      },
    }
    </script>
    
    <style scoped>
    body{
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
    }
     #container {
        height: 300px;
        width: 300px;
        margin: 0px;
        /* border: 15px solid blue; */
    }
    canvas{
      width: 100%;
      height: 100%;
    }
    </style>
    
    更多相关内容
  • 通用性允许您在运行时和编辑器中导入和导出glTF文件。 glTF是一种新的开源3d模型传输格式,它支持Unity中的格式所需要的一切。是什么使GLTFUtility与众不同? 专注于简单性和易用性,GLTFUtility旨在成为一个导入与...
  • Unity导入glTF格式模型

    万次阅读 2019-07-03 08:56:43
    glTF介绍 1.glTF(GL TransmissionFormat),即图形语言交换格式,它是一种3D内容的格式标准,由Khronos Group管理(Khronos Group还管理着OpenGL系列、OpenCL等重要的行业标准); 2.glTF是一种免版税的规范,用于按...

    glTF介绍

    1.glTF(GL TransmissionFormat),即图形语言交换格式,它是一种3D内容的格式标准,由Khronos Group管理(Khronos Group还管理着OpenGL系列、OpenCL等重要的行业标准);
    2.glTF是一种免版税的规范,用于按应用高效传输和加载3D场景和模型;
    3.glTF的设计是面向实时渲染应用的,尽量提供可以直接传输给图形API的数据形式,不再需要二次转换,最大限度地减少了3D资产的大小,以及解压缩和使用这些资产所需的运行时处理;
    4.glTF对OpenGL ES、WebGL非常友好,为3D内容工具和服务定义了一种可扩展的通用发布格式,可简化创作工作流程并实现整个行业内容的可互操作使用;
    5.glTF的目标是:3D领域的JPEG;
    3D领域的JPEG
    6.作为一个标准,自2015年10月发布(glTF 1.0)以来,已经得到了业界广泛的认可;
    7.glTF目前最新版本为2.0已于2017年6月正式发布。
    8.glTF由Khronos作为一个开放项目运行。在GitHub开发并免费提供源代码。
    GLTF的数据存储格式为JSON,详情可以查看官方网站
    JSON存储格式
    glTF支持的软件
    在这里插入图片描述
    glTF行业支持
    在这里插入图片描述
    glTF转化、导入、导出工具
    官方提供了一部分模型转化和导入导出的工具,详情可查看官方介绍

    glTF导入Unity
    官方针对Unity提供了两个插件,分别是UnityGLTFGLTFUtility,这里进行了部分测试,由于笔者能力有限,对于编辑模式下模型的导入尚未有相关结果【如果有相关进展,笔者会进行文章的更新】,笔者主要使用UniGLTF来完成模型的导入,可以直接将模型文件放入Unity的Asset相关文件夹,也可以通过菜单栏的导入功能来导入模型,最终效果如图所示
    在这里插入图片描述
    在这里插入图片描述

    glTF从Unity导出
    这里可以用官方提供的UnityGLTFGLTFUtility来进行。

    展开全文
  • Three.js加载gltf格式模型

    第一步:引入gltfloader

    在这里插入图片描述

    导入gltf并贴图代码:

    let loader = new THREE.GLTFLoader(); /*实例化加载器*/
        var textureNormal = textureLoader.load('./images/ambient_occlusion.jpg');
        loader.load('./model/dnz.gltf', function(obj) {
          console.log(obj);
          obj.scene.scale.set(5, 10, 5);
          obj.scene.position.x = px;
          obj.scene.position.y = py;
          obj.scene.position.z = pz;
    
          obj.scene.rotation.y = ry;
    
          obj.scene.traverse(function (gltf) {
            if(gltf.type === 'Mesh'){
              gltf.material = new THREE.MeshPhongMaterial({
                color: 0xcccccc,
                map:textureNormal,
                normalScale: new THREE.Vector2(3, 3),
              })
            }
    
          })
    
          scene.add(obj.scene);
        })
    

    备注:加载贴图要先申明贴图模型

    let textureLoader = new THREE.TextureLoader();
    

    除此以外对gltf格式的操作在obj.sence中。一定要用遍历traverse否则会报错。

    展开全文
  • 运用Three.js导入gltf模型案例仿照人工智能绘画工具效果制作,AI概念图生成器 Disco Diffusion,输入关键词:星空下的向日葵花海,巨大的向日葵就开在山后,背后是万星璀璨的星空。把给出的 Prompts(提示/描述)由...
  • ThreeJS导入gltf模型和切换动画

    千次阅读 2021-10-27 17:30:03
    最近尝试把带有动画的gltf模型导入,并控制多个动画的切换播放。 效果如下: 主要代码如下,没有定义的函数都是《Three.js开发指南》里的,借用了一下。 function init() { //场景设置 var stats = initStats(); ...

    最近尝试把带有动画的gltf模型导入,并控制多个动画的切换播放。
    效果如下:
    请添加图片描述主要代码如下,没有定义的函数都是《Three.js开发指南》里的,借用了一下。

    function init() {
    //场景设置
      var stats = initStats();
      var renderer = initRenderer();
      renderer.setClearColor(0x262626);
      var camera = initCamera();
      var scene = new THREE.Scene();
      scene.add(new THREE.AmbientLight(0xFFFFFF, 0.3));
      var dirLight = new THREE.DirectionalLight(0xBBFFFF, 2);
      dirLight.position.set(0, 0, 10);
      scene.add(dirLight);
    
      camera.position.set(0, 0, 20);
      var orbitControls = new initOrbitControls(camera, renderer);
      var clock = new THREE.Clock();
    
      var actions = [];
      var mixer = new THREE.AnimationMixer();
      var clipAction
      var animationClip
      var mesh
      var controls
      var mixerControls = {
        time: 0,
        timeScale: 1,
        stopAllAction: function () { mixer.stopAllAction() },
        animation: 'None',
      }
    
    //导入模型和动画
      var loader = new THREE.GLTFLoader();
      loader.load('../../assets/punk_girl/scene.gltf', function (result) {
      //调整
        result.scene.scale.set(8, 8, 8);
        result.scene.translateY(-10);
        scene.add(result.scene)
    
        // setup the mixer
        mixer = new THREE.AnimationMixer(result.scene);
        //用actions储存所有动画
        for (var i = 0; i < result.animations.length; i++) {
          actions[i] = mixer.clipAction(result.animations[i]);
        }
        // add the animation controls
        enableControls();
      });
    
      function enableControls() {
        var gui = new dat.GUI();//用dat gui来实现控制组件
        //一些控制选项
        var mixerFolder = gui.addFolder("AnimationMixer")
        mixerFolder.add(mixerControls, "time").listen()
        mixerFolder.add(mixerControls, "timeScale", 0, 5).onChange(function (timeScale) { mixer.timeScale = timeScale });
        mixerFolder.add(mixerControls, "stopAllAction").listen()
        gui.add(mixerControls, "animation", ['mixamo.com', 'Dancing', 'Idle', 'PettingAnimal', 'Talking', 'Walk', 'WavingGesture', 'None']).onChange(function (animation) {
          for (var i = 0; i < actions.length; i++) {
            if (animation == actions[i].getClip().name) {
              actions[i].play();
            }
            else {
              actions[i].stop();
            }
          }
        })
    
      }
    
      render();
      function render() {
        stats.update();
        var delta = clock.getDelta();
        orbitControls.update(delta);
        requestAnimationFrame(render);
        renderer.render(scene, camera)
        mixer.update(delta);
    
      }
    
    }
    

    借用的函数:

    /**
     * Initialize the statistics domelement
     * 
     * @param {Number} type 0: fps, 1: ms, 2: mb, 3+: custom
     * @returns stats javascript object
     */
    function initStats(type) {
    
        var panelType = (typeof type !== 'undefined' && type) && (!isNaN(type)) ? parseInt(type) : 0;
        var stats = new Stats();
    
        stats.showPanel(panelType); // 0: fps, 1: ms, 2: mb, 3+: custom
        document.body.appendChild(stats.dom);
    
        return stats;
    }
    /**
     * Initialize a simple default renderer and binds it to the "webgl-output" dom
    * element.
     * 
     * @param additionalProperties Additional properties to pass into the renderer
     */
    function initRenderer(additionalProperties) {
    
        var props = (typeof additionalProperties !== 'undefined' && additionalProperties) ? additionalProperties : {};
        var renderer = new THREE.WebGLRenderer(props);
        renderer.shadowMap.enabled = true;
        renderer.shadowMapSoft = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    
        renderer.setClearColor(new THREE.Color(0x000000));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        document.getElementById("webgl-output").appendChild(renderer.domElement);
    
        return renderer;
    }
    /**
     * Initialize a simple camera and point it at the center of a scene
     * 
     * @param {THREE.Vector3} [initialPosition]
     */
    function initCamera(initialPosition) {
        var position = (initialPosition !== undefined) ? initialPosition : new THREE.Vector3(-30, 40, 30);
    
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.copy(position);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
    
        return camera;
    }
    
    function initOrbitControls(camera, renderer) {
        var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
        orbitControls.rotateSpeed = 1.0;
        orbitControls.zoomSpeed = 1.2;
        orbitControls.panSpeed = 0.8;
        orbitControls.noZoom = false;
        orbitControls.noPan = false;
        orbitControls.staticMoving = true;
        orbitControls.dynamicDampingFactor = 0.3;
        orbitControls.keys = [65, 83, 68];
    
        return orbitControls;
    }
    
    展开全文
  • 在导入主场景后,通过事件再次动态导入gltf模型到场景中时发生x轴坐标设置不了的问题,即mesh.position=position不起作用。 用 mesh.computeWorldMatrix(); mesh.position = Vector3.TransformNormal(position, ...
  • three官方推荐使用gltf格式的文件,代表编辑器是blender 本文生成了自定义生成了一个blender模型,并且应用了动画效果,核心代码如下 var mixers = []; var clock = new THREE.Clock(); (function(){ var loader ...
  • 1. 导入依赖 import * as THREE from 'three' import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'; import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'; 2.创建相机、...
  • loader.load("../3d/fly.gltf",function(gltf){ // var axesHelper = new THREE.AxesHelper( 5 ); // scene.add( axesHelper ); const model = gltf.scene; model.position.set( 1, 1, 0 ); // model.scale...
  • Blender glTF 2.0进出口商 文献资料 搅拌机版本 文献资料 2.92 开发者 笔记: 2.80-2.91是以前的稳定版本。 2.83是Blender LTS的第一个版本。 检查blender-v2.83-release分支。 2.92是当前的稳定版本。 检查...
  • 一个下午都在Three.js官网导入GLTF模型,但是很不幸,根据官网DEMO中一直待有texture纹理,不能单独载入模型,后经一番查找,发现其实早已经单独讲模型载入到网页中,但是模型与背景色均为黑色,无法判断是否成功...
  • 文件必须放在public下面,否则会报unexpected token 错误。 路径是’models/gltf/Duck/glTF/Duck.gltf’,前面不用再加public了。
  • UE4的glTF 如果您有兴趣,可以加注星标或分叉或发布问题或发表意见。下载虚幻引擎4 插入下载4.26 2.0.4 Win / Mac版 4.25 2.0.4 Win / Mac版 4.24 2.0.4 Win / Mac版 4.23 2.0.1 Win / Mac 4.22 1.2.3 Win / Mac ...
  • maya-glTF 适用于Autodesk Maya的glTF导出器插件 该插件与Maya的大多数现代版本兼容。 经过Maya 2015+的测试。 glTF规范的大部分已经实现,但这仍在进行中。 为了获得最佳的材质效果,请使用StingrayPBS着色器。 ...
  • 1,什么是glTF文件?一直在研究如何优化检查三维模型的问内容,单独从三维文件来说,有很多可以优化规范的内容,最近在看到有一个压缩格式,话说这个方式是...本人测试了maya和3dmax中导入glTF格式的三维文件,其中...
  • Tiny glTF loader, header only C++ glTF 1.x parsing library. TinyGLTFLoader is a header only C++ glTF 1.x parsing library. TinyGLTFLoader is deprecated. Please go for glTF 2.0 parser/serializer ...
  • let modelUrl = hash.model || "./test.gltf"; let element = document.getElementById("viewer-local"); let viewer = new Viewer(element, {}); viewer.load(modelUrl).then(onSuccess).catch(onError); function...
  • 主要是Revit的二次开发的插件,其中主要是基于Revit2018进行的,实现从Revit中把建筑模型导出来,使用的是GLTF格式的编码。(这个是好用的至少是至今发现上最好用最实用,也是参考然后大改过的 比如解决了Node、纹理...
  • 文章相关引用及参考:packtpubglTF导入和导出工具将在10月下旬的Blender大会期间发布(映维网 2018年10月25日)Mozilla宣布与Khronos Group和开源工具Blender的开发商合作,将为Blender带来glTF格式导入和导出附件。...
  • 图形化开发(六)03-Three.js之导入模型——glTF格式文件导入,3D模型的使用 & vs code之glTF Tools插件的使用方法 glTF格式文件导入 glTF格式的3D格式文件是官方推荐的使用的格式,这种格式的文件我们可以在...
  • unity加载gltf格式文件

    2019-03-22 15:43:01
    glTF是一种可以减少3D格式中与渲染无关的冗余数据并且在更加适合OpenGL簇加载的一种3D文件格式。glTF的提出是源自于3D工业和媒体发展的过程中,对3D格式统一化的急迫需求
  • 加载一个心脏的模型,该模型有一个心跳的动画,在不使用着色器材质地情况下,心跳动画能正常产生效果,使用了之后,动画也启动了,但是并没有跳动,使用其他材质都不影响,只有着色器材质地时候有这个问题。...
  • Unity中使用GLTF文件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 930
精华内容 372
关键字:

导入gltf