ThreeJS-水晶小熊（二十八）
素材：
链接: https://pan.baidu.com/s/1HbT0SlFHwfQbrKH9tXlM5w
提取码: e98i
关键代码：
loader.load('bear.gltf', gltf => {
let textureLoader = new THREE.TextureLoader();
textureLoader = textureLoader.load('three/050.jpg');
//映射-折射映射，不设置将不会透明
textureLoader.mapping = THREE.EquirectangularRefractionMapping;
//gltf.scene.children[0]获取小熊物体
gltf.scene.children[0].material = new THREE.MeshPhongMaterial({
color: 0xffffff,
refractionRatio:0.7,//模型折射率
reflectivity:0.99,//模型反射率
envMap: textureLoader
});
scene.add(gltf.scene);
})
完整代码 ：
<template>
<div id="three_div"></div>
</template><script>
import * as THREE from "three";
import {
OrbitControls
} from "three/examples/jsm/controls/OrbitControls";
import {
RGBELoader
} from "three/examples/jsm/loaders/RGBELoader"
import {
Water
} from "three/examples/jsm/objects/Water2";
import {
GLTFLoader
} from "three/examples/jsm/loaders/GLTFLoader"
import {
DRACOLoader
} from "three/examples/jsm/loaders/DRACOLoader"
export default {
name: "HOME",
components: {
// vueQr,
// glHome,
},
data() {
return {};
},
mounted() {
//使用控制器控制3D拖动旋转OrbitControls
//控制3D物体移动//1.创建场景
const scene = new THREE.Scene();
console.log(scene);//2.创建相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
20000
);
//设置相机位置
camera.position.set(0, 0, 10);
//将相机添加到场景
scene.add(camera);
//添加物体
//创建一个半径为1，经纬度分段数位20的球
const boxBufferGeometry = new THREE.SphereBufferGeometry(500, 50, 50);
//纹理加载器
const regbeLoader = new RGBELoader();
regbeLoader.loadAsync('three/050.hdr').then(loader => {
loader.mapping = THREE.EquirectangularReflectionMapping;
const cloudMaterial = new THREE.MeshBasicMaterial({
map: loader
});
const mesh = new THREE.Mesh(boxBufferGeometry, cloudMaterial);
mesh.geometry.scale(1, 1, -1);
//将物体加入到场景
scene.add(mesh);
})
//添加周围环境灯光（由物体发出的灯光）参数（灯色，强度0-1）
const light = new THREE.AmbientLight(0xFFFFFF, 1);
scene.add(light);
//加载模型
const loader = new GLTFLoader().setPath('three/glb/');
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('three/draco/')
// dracoLoader.setDecoderConfig({
// type: 'js'
// })
loader.setDRACOLoader(dracoLoader);
loader.load('bear.gltf', gltf => {
let textureLoader = new THREE.TextureLoader();
textureLoader = textureLoader.load('three/050.jpg');
//映射-折射映射，不设置将不会透明
textureLoader.mapping = THREE.EquirectangularRefractionMapping;
//gltf.scene.children[0]获取小熊物体
gltf.scene.children[0].material = new THREE.MeshPhongMaterial({
color: 0xffffff,
refractionRatio:0.7,//模型折射率
reflectivity:0.99,//模型反射率
envMap: textureLoader
});
scene.add(gltf.scene);
})//初始化渲染器
const render = new THREE.WebGLRenderer({
//设置抗锯齿，防失真
antialis: true,
//对数深度缓冲区,防止模型闪烁
logarithmicdepthbuffer: true,
});
/*设置场景渲染编码threejs将贴图的编码都默认设置为THREE.LinearEncoding，
*导致图片色彩失真（色彩不像正常那么鲜艳，会灰蒙蒙的），所以务必将场景中的所有贴图的编码都调整为THREE.sRGBEncoding
*/
render.outputEncoding = THREE.sRGBEncoding;
//设置渲染器的尺寸
render.setSize(window.innerWidth, window.innerHeight);
//使用渲染器，通过相机将场景渲染进来//创建轨道控制器，可以拖动,控制的是摄像头
const controls = new OrbitControls(camera, render.domElement);
//设置控制阻尼，让控制器有更真实的效果
controls.enableDamping = true;//将webgl渲染的canvas内容添加到body上
document.getElementById("three_div").appendChild(render.domElement);//渲染下一帧的时候就会调用回调函数
let renderFun = () => {
//更新阻尼数据
controls.update();
//需要重新绘制canvas画布
render.render(scene, camera);
//监听屏幕刷新（60HZ,120HZ），每次刷新触发一次requestAnimationFrame回调函数
//但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果
window.requestAnimationFrame(renderFun);
};
// window.requestAnimationFrame(renderFun);
renderFun();//画布全屏
window.addEventListener("dblclick", () => {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
//document.documentElement.requestFullscreen();
render.domElement.requestFullscreen();
}
});//监听画面变化，更新渲染画面，（自适应的大小）
window.addEventListener("resize", () => {
//更新摄像机的宽高比
camera.aspect = window.innerWidth / window.innerHeight;
//更新摄像机的投影矩阵
camera.updateProjectionMatrix();
//更新渲染器宽度和高度
render.setSize(window.innerWidth, window.innerHeight);
//设置渲染器的像素比
render.setPixelRatio(window.devicePixelRatio);
console.log("画面变化了");
});
},
methods: {
paush(animate) {
animate.pause();
},
},
};
</script><style scoped lang="scss">
</style>
效果图：
ThreeJS-水晶小熊（二十八）相关推荐
- 2008R2Win7管理二十八Mail之基本使用
2008R2Win7管理二十八Mail之基本使用 上篇我们已经安装好了exchange2010,呵呵本片简单介绍和看下ex2010的基本界面和使用 安装完成打开exchange控制台如图所示 汗,有试 ...
- 微信小程序把玩（二十八）image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
- Citrix 服务器虚拟化之二十八 XenApp6.5发布文档内容
Citrix 服务器虚拟化之二十八 XenApp 6.5发布文档内容 XenApp可发布以下类型的资源向用户提供信息访问,这些资源可在服务器或桌面上虚拟化: 1) 服务器桌面:发布场中服务器的整个 ...
- OpenCV学习笔记（二十六）——小试SVM算法ml OpenCV学习笔记（二十七）——基于级联分类器的目标检测objdect OpenCV学习笔记（二十八）——光流法对运动目标跟踪Video Ope
OpenCV学习笔记(二十六)--小试SVM算法ml 总感觉自己停留在码农的初级阶段,要想更上一层,就得静下心来,好好研究一下算法的东西.OpenCV作为一个计算机视觉的开源库,肯定不会只停留在数字图 ...
- （转载）Android项目实战（二十八）：使用Zxing实现二维码及优化实例
Android项目实战(二十八):使用Zxing实现二维码及优化实例 作者:听着music睡 字体:[增加 减小] 类型:转载 时间:2016-11-21 我要评论 这篇文章主要介绍了Android项 ...
- SAP UI5 初学者教程之二十八 - SAP UI5 应用的集成测试工具 OPA 介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
- FreeSql （二十八）事务
FreeSql实现了四种数据库事务的使用方法,脏读等事务相关方法暂时未提供.主要原因系这些方法各大数据库.甚至引擎的事务级别五花八门较难统一. 事务用于处理数据的一致性,处于同一个事务中的操作是一个U ...
- 计算机英语翻译3000字,英语专四作文满分范文（二十八）：计算机翻译
英语专四作文满分范文(二十八):计算机翻译 2015年专四考试预计4月18日开考,考生们现在应该进入紧张的冲刺复习阶段,专四作文是很多同学感到头疼的,在这里新东方在线整理了英语专四作文满分范文供考生们 ...
- WCF技术剖析之二十八：自己动手获取元数据[附源代码下载]
WCF技术剖析之二十八:自己动手获取元数据[附源代码下载] 原文:WCF技术剖析之二十八:自己动手获取元数据[附源代码下载] 元数据的发布方式决定了元数据的获取行为,WCF服务元数据架构体系通过Ser ...
- 【零基础学Java】—笔记本USB接口案例（二十八）
[零基础学Java]-笔记本USB接口案例(二十八) 一.笔记本电脑 笔记本电脑(laptop)通常具备使用USB设备的功能,在生产时,笔记本都预留了可以插入USB设备的USB接口,但具体什么是USB ...
最新文章
- “接着奏乐接着舞”，大脑也是这么想的
- 国内哪里培训python比较好-python培训哪家机构比较好？
- [转帖] 世间什么才是最珍贵的?
- mysql ignore index,mysql强制索引FORCE INDEX/IGNORE INDEX忽略索引
- 剑指offer之C语言实现链表（两种方式）
- [读书笔记] -《C++ API设计》第7章 性能
- .NET：枚举的默认值
- boa 调用 cgi 读取文件_PHP7的内核CGI与FastCGI，你懂多少？
- 无法安装Sql Server 2000时的解决方法．
- Android 数据存储/访问 之 SharedPreferences(偏好设定)
- npm i 报错 'match' of undefined 错误以及删除node_modules失败
- Java小项目（一）---超市管理系统
- DOS控制台启动方式+DOS控制台常用命令
- win10摄像头无法使用黑屏的解决办法
- 黑色渐变背景css,css-渐变背景，爱了爱了。
- 2cm有多长实物图_2cm(2cm有多长实物图)
- 黎曼的zeta函数(1)
- Docker系列之八：在Dockerfile中使用多段构建Muti-stage build
- vue-awesome-swiper 传参控制滑动位置 滚动位置 slideTo 备注防止后期忘记
- excel多列多行合并成多列一行