<!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. 201871010118-唐敬博《面向对象程序设计（java）》第十三周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  2. 【转载】预处器的对比——Sass、LESS和Stylus

    常用的3大css预编译器:Sass.LESS和Stylus,你是否会混淆它们的区别和用法.这里有篇文章介绍的挺详细. 传送门:https://www.w3cplus.com/css/sass-vs-l ...

  3. [LeetCode] 164. Maximum Gap 求最大间距

    Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...

  4. log4j输出到控制台的性能问题

    一.背景 最近几个业务遇到服务假死的情况,通过排查,我们发现是因为业务在线上使用了日志框架的ConsoleAppender所致. 请尊重作者劳动成果,转载请标明原文链接:https://www.cnb ...

  5. Java之数据库基础理论

    一.事务的四大特性 ACID 只有满足一致性,事务的执行结果才是正确的. 在无并发的情况下,事务串行执行,隔离性一定能够满足.此时要只要能满足原子性,就一定能满足一致性. 在并发的情况下,多个事务并发 ...

  6. nacos服务注册与发现及服务配置实现

    Nacos 提供了一组简单易用的特性集,可快速实现动态服务发现.服务配置.服务元数据及流量管理. 更敏捷和容易地构建.交付和管理微服务平台. 关键特性: 服务发现和服务健康监测 动态配置服务 动态 D ...

  7. .NET Core开发的iNeuOS物联网平台部署树霉派（raspbian），从网关到云端整体解决方案。助力2019中国.NET峰会。

    2019 中国.NET 开发者峰会正式启动 目       录 1.      概述... 2 2.      树莓派硬件配置... 2 3.      软件信息... 3 4.      Raspb ...

  8. TINYMCE使用手册

    TINYMCE使用手册 这方面的教程会陆续加进来. tinymce.get('f1').getContent();

  9. mysql 基本操作 三

    1.alter 创建测试表 MariaDB [jason]> create table testalter_tbl(i )); Query OK, rows affected (0.08 sec ...

  10. Docker 安装 Request Tracker 工单系统

    1.需求 docker 安装工单系统 Request Tracker,并需要支持 LDAP 登入. 2.制作镜像 1)request-tracker-base镜像 第一个镜像安装一些基础支持软件,如 ...