美文网首页
three-入门学习-简单的3D实现

three-入门学习-简单的3D实现

作者: 未来在奋斗 | 来源:发表于2023-04-08 17:34 被阅读0次

---

title: three-入门学习-简单的3D实现

date: 2023-04-06 11:45:00

categories: 入门学习

tags: Three

---

### three-入门学习

###### 1. 安装 three.js

> npm install three 安装好之后复制如下代码就能跑起来

>

> > 3D 效果是前端绕不过的发展趋势,未来会有更多的 3D 场景的需要。

```javascript

<template>

  <div>3D</div>

</template>

<script setup lang="ts">

import * as THREE from 'three';

//创建一个三维场景Scene 构造器,相当于你需要放东西的盒子

const scene = new THREE.Scene();

// 创建一个相机 PerspectiveCamera 透明相机,相当于一个投影仪,投影出3D效果

// PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

// fov — 摄像机视锥体垂直视野角度

// aspect — 摄像机视锥体长宽比

// near — 摄像机视锥体近端面

// far — 摄像机视锥体远端面

const camera = new THREE.PerspectiveCamera(

  75,

  window.innerWidth / window.innerHeight,

  0.1,

  1000

);

// 创建你的渲染器,用来渲染你定义的图形动画

const renderer = new THREE.WebGLRenderer();

// 设置渲染图形的大小

renderer.setSize(window.innerWidth, window.innerHeight);

// 添加元素

document.body.appendChild(renderer.domElement);

//  定义立方体图形

const geometry = new THREE.BoxGeometry(1, 1, 1);

// 构建立方体的材质和颜色

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 网格内的物体 构成定义的立方体图形,并且使用什么样的材质

const cube = new THREE.Mesh(geometry, material);

// 放在环境中

scene.add(cube);

// 坐标轴的位置

camera.position.z = 5;

function animate() {

  // 频率刷新 切换的时候会停止

  requestAnimationFrame(animate);

  // 物体旋转的大小

  cube.rotation.x += 0.01;

  cube.rotation.y += 0.01;

  // 图形渲染函数 传入场景和相机

  renderer.render(scene, camera);

}

animate();

</script>

<style scoped>

.logo {

  height: 6em;

  padding: 1.5em;

  will-change: filter;

  transition: filter 300ms;

}

.logo:hover {

  filter: drop-shadow(0 0 2em #646cffaa);

}

.logo.vue:hover {

  filter: drop-shadow(0 0 2em #42b883aa);

}

</style>

```

相关文章

  • css实现简单的3D效果

    css实现简单3D房间效果 纯3D效果实现上述效果,总体思路就是旋转容器,为容器贴纸。 这是一个简单的3D立方体空...

  • 2020-01-31

    学习规划 1、Three.js 3D场景 40分钟 2、尝试实现简单的3d效果 3、SSM框架 3小时视频 4、J...

  • 3D Touch

    iOS之实现3D Touch跟着官方文档学习3D Touch

  • 3D touch

    3D Touch 简单应用 - 简书 3D Touch学习笔记 - 简书

  • VUE threejs birds 3DAnimation

    最近在学习前端开发,用的是入门超级简单的VUE。 因为对动画很感兴趣 所以仿写一个3d动画 原项目是threejs...

  • Struts2框架入门使用教程

    Struts2是最近入门框架时学习的框架,其主要是取代之前写的servlet层,实现前后端之间的交互作用,实现简单...

  • iOS OpenGL ES入门-基础渲染2

    本文介绍通过基于OpenGL ES的GLKView简单实现将一张图片绘制到屏幕的方法,仅用于入门学习。 ViewC...

  • UIView transitionFromView导致子视图Co

    项目开发需要实现一个简单的效果,一个音乐专辑,需要实现定时反复3D旋转的效果,这个效果很简单,利用iOS自带的动画...

  • 用Tableau画3D模型之一(入门篇)

    这次我计划用三篇文章来介绍用Tableau制作3D模型的方法,分为入门篇、提高篇和进阶篇。 今天我们先来入门,学习...

  • 《深度学习入门:基于Python的理论与实现》高清中文版PDF+

    《深度学习入门:基于Python的理论与实现》高清中文版PDF+源代码免费下载 《深度学习入门:基于Python的...

网友评论

      本文标题:three-入门学习-简单的3D实现

      本文链接:https://www.haomeiwen.com/subject/hhikictx.html