<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<script src="three.js"></script>
<script src="stats.js"></script>
<script src="Tween.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #eeeeee;
}
</style>
<script>
var renderer, stats;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 100;
camera.position.y = 300;
camera.position.z = 500;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt(0, 0, 0);
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
var light;
function initLight() {
// light = new THREE.DirectionalLight(0xff0000); //方向光
// light.position.set(0, 0, 1);
// scene.add(light);
light = new THREE.AmbientLight(0x00FF00); //环境光
light.position.set(100, 100, 200);
scene.add(light);
// light = new THREE.PointLight(0xff0000); //点光源
// light.position.set(0, 0, 25);
// scene.add(light);
}
var cube, mesh;
function initObject() {
var geometry = new THREE.BoxGeometry(100, 100, 100);
for (var i = 0; i < geometry.faces.length; i += 2) {
var hex = Math.random() * 0xffffff;
geometry.faces[i].color.setHex(hex);
geometry.faces[i + 1].color.setHex(hex);
}
var material = new THREE.MeshBasicMaterial({
vertexColors: THREE.FaceColors
});
mesh = new THREE.Mesh(geometry, material);
mesh.position = new THREE.Vector3(0, 0, 0);
scene.add(mesh);
}
function initGrid() {
var helper = new THREE.GridHelper(1000, 50, 0x0000ff, 0x808080);
scene.add(helper);
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
initGrid();
animation();
}
function animation() {
// renderer.clear();
stats.update();
mesh.rotateY(0.01);
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
</script>
</head>
<body onload="threeStart()">
<div style="margin-left:150px;">
<p>课前准备，绘制一个立方体和一个网格线</p>
</div>
<div id="canvas-frame"></div>
</body>
</html>
 
 
 
 

three 3D实例学习的更多相关文章

  1. 2D、3D形变

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } span.Apple-tab-span { ...

  2. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  3. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  4. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  5. Android ViewPager打造3D画廊

    本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...

  6. 如何在ASP.Net创建各种3D图表

    我们都知道,图表在ASP.NET技术中是一种特别受欢迎而又很重要的工具.图表是表示数据的图形,一般含有X和Y两个坐标轴.我们可以用折线,柱状,块状来表示数据.通过图表控件,我们即能表示数据又能比较各种 ...

  7. 现代3D图形编程学习-基础简介(3)-什么是opengl (译)

    本书系列 现代3D图形编程学习 OpenGL是什么 在我们编写openGL程序之前,我们首先需要知道什么是OpenGL. 将OpenGL作为一个API OpenGL 通常被认为是应用程序接口(API) ...

  8. CSS 3 学习——transform 3D转换渲染

    以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其 ...

  9. jQuery可拖拽3D万花筒旋转特效

    这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovert ...

随机推荐

  1. Flask框架入门(一)

    Flask诞生于2010年,是Armin ronacher(人名)用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架. Flask 本身相当于一个内核,其他几乎所有的功能都 ...

  2. 201871010112-梁丽珍《面向对象程序设计（java）》第六、七周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>    https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址> ...

  3. Lp距离, L1范数, 和L2范数（转载）

    范式可以理解成距离 转载自: https://blog.csdn.net/hanhuili/article/details/52079590 内容如下: 由此可见,L2其实就是欧式距离.工程上,往往不 ...

  4. 微信小程序 - 组件 | 自定义组件 | 组件事件传递页面

    组件 小程序允许我们使用自定义组件的方式来构建页面 类似Vue的小组件 自定义组件 类似于页面,一个自定义组件由 json, wxml, wxss, js 4个文件组成 1.创建 1.创建compon ...

  5. 【目标检测】SSD：

    slides 讲得是相当清楚了: http://www.cs.unc.edu/~wliu/papers/ssd_eccv2016_slide.pdf 配合中文翻译来看: https://www.cnb ...

  6. centos7中运行ifconfig提示“-bash: ifconfig: command not found”解决方案

    linux系统查看ip地址常用命令是[ifconfig], CentOS 7.0最小安装是没有ifconfig命令怎么办? 1.用[ip addr]查看; 2.就是安装ifconfig命令 1.输入[ ...

  7. 怎么写Java项目？

    我们通常说的Java项目也都是JavaWeb,J2ee项目;现在说的是JavaWeb. 最简单的办法 多看别人项目源码 在别人基础上修改,而现在要一点一点掰开看看. 1.立项: 要做什么东西,最后的要 ...

  8. 9.第一个vue-cli项目

    1.什么是vue-cli vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板; 预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这 ...

  9. MySQL日记

    MySQL日记 MySQL——day01:https://www.cnblogs.com/noonjuan/diary/2019/07/24/11241543.html MySQL——day02:ht ...

  10. [RN] React Native : Failed to execute aapt

    这是我在开发 React Native 本地 Android Studio 3.1.4 时 构建 release 版本失败,而开发环境正常 之前用 Android Studio 2.*  未出现此问题 ...