本文介绍了一个基于HTML、CSS和JavaScript构建的三维场景交互与渲染系统，包括形状选择、材质编辑、灯光设置、相机控制等功能。
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Scripts/gl-matrix.js"></script>
<script type="text/javascript" src="/Scripts/three.js"></script>
<link rel="stylesheet" type="text/css" href="/Content/Css/bootstrap.min.css" />
<style>
.padDialog {
position: absolute;
left: 200px;
top: 200px;
border-color: #ddd;
border-width: 1px;
border-radius: 10px;
padding: 10px;
z-index: 9999;
box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
}
</style>
</head>
<body>
<div id="container" class="container-fluid">
<div id="shapes" class="row">
<div class="btn btn-default" type="cube" id="shape-rect">Cube</div>
<div class="btn btn-default" type="sphere" id="shape-circle">Sphere</div>
</div>
<div id="materials" class="row">
<div class="btn btn-default" id="material-rect" type="basic">basic material</div>
<div class="btn btn-default" id="material-rect" type="lamberate">lamberate</div>
</div>
<div id="lights" class="row">
<div class="btn btn-default" id="light-ambient" type="ambient">Ambient light</div>
<div class="btn btn-default" id="light-point" type="point">Point light</div>
<div class="btn btn-default" id="light-spot" type="spot">Spotlight</div>
</div>
<div id="camera" class="row">
<div class="btn btn-default" id="light-ambient" type="camera">Camera</div>
</div>
</div>
<div id="render">
<div class="btn btn-default" id="startRender" onclick="startRender()">start render</div>
</div>
<div id="lightsProperties" style="display:none;">
<form class="form-inline">
<div class="form-group ambient point spot">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<div class="input-group-addon">X</div>
<input type="text" class="form-control" name="position.x" id="" placeholder="X">
</div>
</div>
<div class="form-group ambient point spot">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<div class="input-group-addon">Y</div>
<input type="text" class="form-control" name="position.y" id="" placeholder="Y">
</div>
</div>
<div class="form-group ambient point spot">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<div class="input-group-addon">Z</div>
<input type="text" class="form-control" name="position.z" id="" placeholder="Z">
</div>
</div>
</form>
</div>
<div id="materialsProperties" style="display:none;">
<form class="form-inline">
<div class="form-group basic lamberate">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<div class="input-group-addon">颜色</div>
<input type="text" class="form-control" name="color" id="color" placeholder="请输入6位16进制颜色值如0xffffff">
</div>
</div>
</form>
</div>
<div id="cameraProperties" style="display:none;">
<form class="form-inline">
<div class="form-group camera">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<div class="input-group-addon">X</div>
<input type="text" class="form-control" name="position.x" id="x" placeholder="X">
</div>
</div>
<div class="form-group camera">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<div class="input-group-addon">Y</div>
<input type="text" class="form-control" name="position.y" id="y" placeholder="Y">
</div>
</div>
<div class="form-group camera">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<div class="input-group-addon">Z</div>
<input type="text" class="form-control" name="position.z" id="z" placeholder="Z">
</div>
</div>
</form>
</div>
<div id="shapesProperties" style="display: none;">
<form class="form-inline">
<div class="input-group cube sphere">
<div class="input-group-addon">X</div>
<input type="text" class="form-control" name="position.x" id="x" placeholder="X">
</div>
<div class="input-group cube sphere">
<div class="input-group-addon">Y</div>
<input type="text" class="form-control" name="position.y" id="y" placeholder="Y">
</div>
<div class="input-group cube sphere">
<div class="input-group-addon">Z</div>
<input type="text" class="form-control" name="position.z" id="z" placeholder="Z">
</div>
<div class="input-group cube">
<div class="input-group-addon">长</div>
<input type="text" class="form-control" name="length" id="length" placeholder="长">
</div>
<div class="input-group cube">
<div class="input-group-addon">宽</div>
<input type="text" class="form-control" name="width" id="width" placeholder="宽">
</div>
<div class="input-group cube">
<div class="input-group-addon">厚</div>
<input type="text" class="form-control" name="thickness" id="thickness" placeholder="厚">
</div>
<div class="input-group sphere">
<div class="input-group-addon">半径</div>
<input type="text" class="form-control" name="radius" id="radius" placeholder="长">
</div>
<div class="input-group sphere">
<div class="input-group-addon">纬度分割数</div>
<input type="text" class="form-control" name="widthSegment" id="widthSegment" placeholder="宽">
</div>
<div class="input-group sphere">
<div class="input-group-addon">经度分割数</div>
<input type="text" class="form-control" name="heightSegment" id="heightSegment" placeholder="厚">
</div>
</div>
<table class="table table-hover" id="sceneElements"></table>
<div id="myRenderArea" style="width: 100%;">
</div>
</body>
<script type="text/javascript" src="/Scripts/ThreeDS.js"></script>
</html>
var shapeObjs = [];
$("#container > div > div").click(function () {
$(this).parent().find(" > div").removeClass("btn-primary");
$(this).addClass("btn-primary");
var dialogDiv = $("#" + $(this).parent().attr("id") + "Properties");
dialogDiv.attr("type",$(this).attr("type"));
dialogDiv.find(" > form > div").hide();
dialogDiv.find(" ." + $(this).attr("type")).show();
dialogDiv.DSDialog({
title: "属性窗口",
buttons: {
yes: true,
cancel: true
},
yesFunction: function (self) {
var shape = { type: $(self).attr("type") };
var inputs = $(self).find("input");
for (var i = 0; i < inputs.length; i++) {
if(/\./.test(inputs[i].name)){
var attrs = inputs[i].name.split(".");
if(!shape[attrs[0]]){
shape[attrs[0]]={}
}
shape[attrs[0]][attrs[1]] = inputs[i].value;
}
else{
shape[inputs[i].name] = inputs[i].value;
}
}
sceneElements.push(shape);
$("#sceneElements").DSTable("reload");
},
cancelFunction: function () {
$(this).hide();
}
});
});
$(function () {
$("#myRenderArea").css("height", innerHeight - $("#container").height())
var myThreeDS = new ThreeDS("#myRenderArea");
})
function startRender() {
myThreeDS.render();
}
function addMesh()
{
var shapeType = $("#shapes .btn-primary").attr("type");
var shape = ThreeDS.setShape(shapeType);
}
function ThreeDS(selecter) {
this.container = document.createElement('div');
$(selecter).append(this.container);
this.camera = new THREE.PerspectiveCamera(75, $(selecter).width() / $(selecter).height(), 1, 10000);
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize($(selecter).width(), $(selecter).height());
this.renderer.setClearColorHex(0x000000, 1.0);
this.container.appendChild(this.renderer.domElement);
this.lights = [];
this.meshes = [];
}
ThreeDS.prototype.setShape = function (Type, params) {
var shape = null;
switch (Type) {
case "Cube":
shape = new THREE.CubeGeometry(params[0], params[1], params[2]);
break;
case "Sphere":
shape = new THREE.SphereGeometry(params[0], params[1], params[2]);
break;
default:
break;
}
return shape;
}
ThreeDS.prototype.setLight = function (Type, params) {
var light = new THREE.PointLight(0xffffff, 1, 600);
return light;
}
ThreeDS.prototype.beforeRender = function () {
for (var i = 0; i < this.lights.length; i++) {
this.scene.add(this.lights[i]);
}
for (var i = 0; i < this.meshes.length; i++) {
this.scene.add(this.meshes[i]);
}
}
ThreeDS.prototype.render = function () {
this.renderer.render(this.scene, this.camera);
}
$.prototype.DSDialog = function (options) {
var self = this;
$(".padDialog").hide();
var self = this;
$(this).addClass("padDialog");
if (options == "close") { this.hide(); }
else { $(this).show(); }
if (typeof options == "object") {
if (this.find("#padDialog-title").length == 0) {
var titleHtml = "<div id='padDialog-title' style='text-align: center;border-bottom: 1px solid #655F5F;'>" + options.title + "</div>";
$(this).prepend(titleHtml);
}
$(this).show();
if (options.url) {
$.ajax({
url: options.url,
type: 'POST',
async: true,
success: function (result) {
if (self.find("#padDialog-body").length == 0) {
self.append("<div id='padDialog-body'> </div>");
}
self.find("#padDialog-body").html(result);
if (options.followMouse) {
var top = event.touches[0].clientY;
var left = event.touches[0].clientX;
$(self).css('top', top + 'px');
$(self).css('left', 0 + 'px');
}
else {
var top = (innerHeight - self.height()) / 2;
var left = (innerWidth - self.width()) / 2;
$(self).css('top', top + 'px');
$(self).css('left', left + 'px');
}
}
});
}
if (options.width) {
this.css("width", options.width);
}
if (this.find("#padDialog-buttons").length == 0) {
var footButtonsHtml = "<div id='padDialog-buttons' style='text-align:center;display:none;'>";
if (options.buttons && options.buttons.yes) {
footButtonsHtml += "<button id='padDialog-buttonYes'>确定</button>";
}
if (options.buttons && options.buttons.cancel) {
footButtonsHtml += "<button id='padDialog-buttonCancel'>取消</button>";
}
footButtonsHtml += "</div>";
this.append($(footButtonsHtml));
if (options.buttons && (options.buttons.cancel || options.buttons.yes)) {
self.find("#padDialog-buttons").show();
}
var buttonMarinRight = (this.width - 100) / 2;
this.find("#padDialog-buttonYes").bind("click", function () {
if (options.yesFunction) { options.yesFunction(self) }
self.hide();
self.find("#padDialog-buttons").remove();
});
this.find("#padDialog-buttonCancel").bind("click", function () {
if (options.cancelFunction) { options.cancelFunction(self) }
self.hide();
self.find("#padDialog-buttons").remove();
});
}
if (options.followMouse) {
var top = event.touches[0].clientY;
var left = event.touches[0].clientX;
$(this).css('top', top + 'px');
$(this).css('left', left + 'px');
}
else if (options.followElementLeft) {
var top = $(event.target).offset().top;
var left = $(event.target).offset().left - $(this).width() - 20;
$(this).css('top', top + 'px');
$(this).css('left', left + 'px');
}
else {
var top = (innerHeight - this.height()) / 2;
var left = (innerWidth - this.width()) / 2;
$(this).css('top', top + 'px');
$(this).css('left', left + 'px');
}
}
}
$.prototype.DSTable = function (options)
{
if (!options) { return }
if(options=="reload"){
if(this[0].DSTableOptions){
this.DSTable(this[0].DSTableOptions);
}
}
var htmlStr = "";
if (options.Columns)
{
var columns = options.Columns;
var data = options.data;
htmlStr += "<thead>";
for (var i = 0; i < columns.length; i++) {
htmlStr += ("<td>" + columns[i].title + "</td>");
}
htmlStr += "</thead>";
for (var i = 0; i < options.data.length; i++) {
htmlStr += "<tr>";
for (var j = 0; j < columns.length; j++) {
if (columns[j].formater) {
htmlStr += ("<td>" + columns[j].formater(data[i],i) + "</td>");
}
else {
htmlStr += ("<td>" + data[i][columns[j].field] + "</td>");
}
}
htmlStr += "</tr>";
}
}
this.append(htmlStr);
this[0].DSTableOptions = options;
}
var sceneElements = [{shape:"rect",position:{x:1,y:1,z:1}}];
$("#sceneElements").DSTable({
data:sceneElements,
Columns:
[{
title: "形状",
field: "shape"
},
{
title: "位置",
field: "position",
formater:function(row,index){
return row.position.x + "," + row.position.y + "," + row.position.z;
}
}]
});
扫一扫
2355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
